当前位置： 首页 > article >正文

day20JS-axios数据通信

article 2024/11/20 17:22:11

1. 什么是axios

        axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，简单的理解就是ajax的封装，只不过它是Promise的实现版本。

特性：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据

2. 怎么导入axios

1. 安装：在vscode的集成终端中输入 npm i axios 的命令下载axios模块。

2. 在html文件中引入

方法一：外部引入

<script src="./node_modules/axios/dist/axios.js"></script>

方法二：内部引入

<body>
    <script type="module">
        // 引入方法二
        import axios from "./node_modules/axios/dist/esm/axios.js"
    </script>
</body>

3. 简单的get请求

写法一：

<body>
    <script type="module">
        // 引入方法二
        import axios from "./node_modules/axios/dist/esm/axios.js";
        axios({
            url: "http://localhost:4003/users"
        }).then(function (result) {
            console.log(result);
            console.log(result.data);
        })
    </script>
</body>

写法二：

<body>
    <script type="module">
        // 引入方法二
        import axios from "./node_modules/axios/dist/esm/axios.js";

        init();
        async function init() {
            let result = await axios({
                url: "http://localhost:4003/users"
            })
            console.log(result);
            console.log(result.data);
        }
    </script>
</body>

4. axios可配置的属性

axios可配置的属性：

  • url ：服务器的地址。
  • method ：请求方法的类型。
  • params(用于get) / data(用于post)：传的参数。是key-value键值对。
  • headers ：请求头部信息。是key-value键值对。
  • responseType：服务器响应的数据类型。是什么数据类型，响应的数据就会转化为什么数据类型。

      例如： responseType: "json" -->服务器响应的数据是json数据

  • then((response)=>{...}) ：请求成功执行的函数。
  • catch((error)=>{...})：请求失败执行的函数。

5. axios的get配置 

5.1 配置方法一

配置模板：

        axios({
            url: "被访问服务器地址",
            // 默认请求方式为get
            method: "get",
            // 传递参数
            params: {
                key: value
            },
            // 设置请求头信息
            headers: {
                key: value
            },
            // 服务器响应的数据是json数据
            responseType: "json"

        }).then((response) => {
            // 请求成功
            let res = response.data;
            console.log(res);
        }).catch((error) => {
            // 请求失败，
            console.log(error);
        });

案列：

<body>
    <script type="module">
        // 引入方法二
        import axios from "./node_modules/axios/dist/esm/axios.js";

        init();
        async function init() {
            let result = await axios({
                url: "http://localhost:4003/users",
                method: "get",
                params: { user: "kwj", password: "kwj123456" },
                headers: { "X-Token": "kwj123456" },
                responseType: "json"
            })
            console.log(result);
            console.log(result.data);
        }
    </script>
</body>

5.2 配置方法二

配置模板：

        axios.get("url", {
            // 传递参数
            params: {
                key: value
            },
            // 设置请求头信息，可以传递空值
            headers: {
                key: value
            }
        }).then((response) => {
            // 请求成功
            let res = response.data;
            console.log(res);
        }).catch(error => {
            // 请求失败，
            console.log(error);
        });

案列：

<body>
    <script type="module">
        // 引入方法二
        import axios from "./node_modules/axios/dist/esm/axios.js";

        init();
        async function init() {
            let result = await axios.get("http://localhost:4003/users", {
                params: { user: "kwj", password: "kwj123456" },
                headers: { "X-Token": "kwj123456" },
                responseType: "json"
            });
            console.log(result);
            console.log(result.data);
        }
    </script>
</body>

6. axios的post配置 

6.1 配置方法一

配置模板：

        axios({
            url: "被访问服务器地址",
            method: "post",
            // 传递参数
            data: {
                key: value
            },
            // 设置请求头信息
            headers: {
                key: value
            },
            responseType: 'json'
        }).then((response) => {
            // 请求成功
            let res = response.data;
            console.log(res);
        }).catch(error => {
            // 请求失败，
            console.log(error);
        });

案列：

<body>
    <script type="module">
        // 引入方法二
        import axios from "./node_modules/axios/dist/esm/axios.js";

        init();
        async function init() {
            let result = await axios({
                url: "http://localhost:4003/postusers",
                method: "post",
                data: { user: "kwj", password: "kwj123456" },
                headers: { "X-Token": "kwj123456" },
                responseType: "json"
            })
            console.log(result);
            console.log(result.data);
        }
    </script>
</body>

6.2 配置方法二

配置模板：

        let data = {
            key: value
        },
            headers = {
                USERID: "",
                TOKEN: ""
            };
        // 若无headers信息时，可传空对象占用参数位置
        axios.post("url", data, {headers}

        ).then((response) => {
            // 请求成功
            let res = response.data;
            console.log(res);
        }).catch((error) => {
            // 请求失败，
            console.log(error);
        });

案列：

<body>
    <script type="module">
        // 引入方法二
        import axios from "./node_modules/axios/dist/esm/axios.js";

        init();
        async function init() {
            let result = await axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" });
            console.log(result);
            console.log(result.data);
        }
    </script>
</body>

7. axios并发处理

并发方法：

axios.all([ ]) ：同时发送多个请求。注意该方法的参数是数组。

axios.spread()：在then方法中执行了 axios.spread 方法。接收axios.all方法中每个请求返回的响应。

 案列1：

<body>
    <script type="module">
        // 引入方法二
        import axios from "./node_modules/axios/dist/esm/axios.js";
        init();
        async function init() {
            let resultList = await axios.all([
                axios.get("http://localhost:4003/users", {
                    params: { a: 4, b: 3 },
                    headers: { "X-Token": "kwj123456" },
                    responseType: "json"
                }),
                axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })
            ])
            console.log(resultList);
        }
    </script>
</body>

案列2：把案列1改为解构 ，下面有两种解决方法，推荐使用写法一。

<body>
    <script type="module">
        // 引入方法
        import axios from "./node_modules/axios/dist/esm/axios.js";
        
        //写法一：解构方法
        init();
        async function init() {
            let [result1, result2] = await axios.all([
                axios.get("http://localhost:4003/users", {
                    params: { a: 4, b: 3 },
                    headers: { "X-Token": "kwj123456" },
                    responseType: "json"
                }),
                axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })
            ])
            console.log(result1, result2);
        }
----------------------------------------------------------------------------------------
       //写法二：在then方法中执行了 axios.spread 方法
        axios.all([
            axios.get("http://localhost:4003/users", {
                params: { a: 4, b: 3 },
                headers: { "X-Token": "kwj123456" },
                responseType: "json"
            }),
            axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })
        ]).then(axios.spread((res1, res2) => {
            console.log(res1, res2);
        }))
    </script>
</body>

8. axios的全局配置 

8.1 简单的全局配置 

1. 在js文件夹下创建一个request.js.js文件，并编写js文件。

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";

// 默认导出axios接口
export default axios;

2. 在html文件中使用它

<body>
  <script type="module">
        // 引入编写的文件
        import request from "./js/request.js";

        request.get("http://localhost:4003/users", {
            params: { a: 4, b: 3 },
            headers: { "X-Token": "kwj123456" },
            responseType: "json"
        }).then(function (res) {
            console.log(res);
        })
    </script>
</body>

8.2 axios全局配置的基础配置

axios的全局配置的好处 ：可以设置一下基础的配置，例如默认路劲，超时时间等。

request.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";
// 2. 配置默认路劲
axios.defaults.baseURL = "http://localhost:4003";
// 3. 配置超时时间
axios.defaults.timeout = 3000;

//4.默认导出axios接口
export default axios;

 html文件:

<body>
   <script type="module">
        // 引入编写的文件
        import request from "./js/request.js";

        request.get("/users", {
            params: { a: 4, b: 3 },
            headers: { "X-Token": "kwj123456" },
            responseType: "json"
        }).then(function (res) {
            console.log(res);
        })
    </script>
</body>

8.3 创建 axios实例

        通过创建 axios实例可以访问不同的服务器路劲，用于不同的请求访问。想要访问哪些路劲可以单独创建不同的axios实例。

1. 创建一个request1.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";

// 2.创建axios实例
const instance = axios.create({
    baseURL: "http://localhost:4003",
    timeout: 3000
})

//3.默认导出axios接口
export default instance;

2. 创建一个request2.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";

// 2.创建axios实例
const instance = axios.create({
    baseURL: "http://localhost:4004",
    timeout: 3000
})

//3.默认导出axios接口
export default instance;

3. 创建一个html文件，引入request1.js文件和request2.js文件。

<body>
    <script type="module">
        // 引入编写axios实例的文件
        import request1 from "./js/request1.js";
        import request2 from "./js/request2.js";
        //通过axios实例可以访问到不同的服务器的路劲
        request1.get("/users", {
            params: { a: 4, b: 3 },
            headers: { "X-Token": "kwj123456" },
            responseType: "json"
        }).then(function (res) {
            console.log(res);
        })
    </script>
</body>

9. axios拦截器

9.1 拦截器的分类

  • 请求拦截器（成功回调函数，失败回调函数）
  • 响应拦截器（成功回调函数，失败回调函数）

9.2 请求拦截器使用方法

1. 请求拦截器

写法一：

axios.interceptors.request.use(成功回调函数，失败回调函数）

写法二：

axios实例对象名.interceptors.request.use(成功回调函数，失败回调函数）

请求拦截器中有两个回调函数，一个是请求成功时的拦截器，一个是请求失败时的拦截器。不管是成功还是失败都要return 返回结果。

2. 请求拦截器的作用：一般用于发送请求时加入Cookie或者LocalStorage中的部分数据，让指定的路由请求都携带这些数据。例如：可以根据所给定的路由在请求拦截器中给特定请求添加统一的请求头部信息，例如token。

案列：

1. 创建一个request1.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";

// 2.创建axios实例
const instance = axios.create({
    baseURL: "http://localhost:4003",
    timeout: 3000
})

//3.请求拦截器
instance.interceptors.request.use((request) => {
    // 请求成功，判断是否是注册页面的路由或者是登录页面的路由
    if (!/register|login/.test(request.url)) {
        //添加请求头部信息
        request.headers.user = localStorage.user;
        request.headers.token = localStorage.token;
    }
    return request;
}, (error) => {
    //请求失败
    return error;
})

//4.默认导出axios接口
export default instance;

2. 创建一个html文件，引入request1.js文件。

<body>
    <script type="module">
        // 引入编写axios实例的文件
        import request1 from "./js/request1.js";
        import request2 from "./js/request2.js";
        //通过axios实例可以访问到不同的服务器的路劲
        request1.get("/users", {
            params: { a: 4, b: 3 },
            headers: { "X-Token": "kwj123456" },
            responseType: "json"
        }).then(function (res) {
            console.log(res);
        })
    </script>
</body>

9.3 响应拦截器使用方法

1. 响应拦截器：

写法一：

axios.interceptors.response.use(成功回调函数，失败回调函数）

写法二：

axios实例对象名.interceptors.response.use(成功回调函数，失败回调函数）

请求拦截器中有两个回调函数，一个是请求成功时的拦截器，一个是请求失败时的拦截器。不管是成功还是失败都要return 返回结果。

2. 响应拦截器的作用：

  • 预先解析处理部分接口相同的数据。
  • 接收服务器返回的数据时，可以得到服务器设置的部分头部信息、Cookie或者LocalStorage中数据直接进行存储。
  • 当响应的结果有问题时，可以使用响应拦截器进行处理，控制路由的跳转。比如发信息时没有携带token,这时候返回的信息中提示没有携带token就可以跳转到登录页面。

案列：

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";


// 2.创建axios实例
const instance = axios.create({
    baseURL: "http://localhost:4003",
    timeout: 3000
})

//3.请求拦截器
instance.interceptors.request.use((request) => {
    // 请求成功，判断是否是注册页面的路由或者是登录页面的路由
    if (!/register|login/.test(request.url)) {
        //添加请求头部信息
        request.headers.user = localStorage.user;
        request.headers.token = localStorage.token;
    }
    return request;
}, (error) => {
    //请求失败
    return error;
})

//4.响应拦截器
instance.interceptors.response.use((response) => {
    if (!/register/.test(response.url)) {
        //获取请求头部信息
        localStorage.user = response.headers.user;
        localStorage.token = response.headers.token;
        // boll为false时,err为true时
        if (!response.data.result.boll || response.data.err) {
            // 跳转到登录页面
        }
    }
    return response;
}, (error) => {
    //请求失败
    return error;
})

//5.默认导出axios接口
export default instance;


http://www.kler.cn/a/301129.html

相关文章：

  • 生成式语言模型 三范式 预训练、微调、强化反馈学习
  • 【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
  • 【unity小技巧】一些unity3D灯光的使用与渲染及性能优化方案
  • React--》如何高效管理前端环境变量：开发与生产环境配置详解
  • 第二十一周学习周报
  • PG-DERN 解读：少样本学习、 双视角编码器、 关系图学习网络
  • Java面试题·解释题·框架部分
  • FastGPT自定义插件的icon
  • Ubuntu系统Docker部署数据库管理工具DbGate并实现远程查询数据
  • Hash算法与Hash冲突
  • JS_分支结构
  • JavaWeb - Mybatis-Plus - 条件构造器
  • 【机器学习】高斯过程的基本概念和应用领域以及在python中的实例
  • vue原理分析（十）研究new Vue()中的initEvents
  • AuthenticationProvider在spring security的作用和触发点
  • 点亮第一盏LED灯 3）， LED灯GPIO引脚设置
  • 浅析 MyBatis 中的连接池和缓存
  • Redis 持久化机制详解
  • OpenCV结构分析与形状描述符（12）椭圆拟合函数fitEllipseAMS()的使用
  • 六种远程控制电脑的方法，第二种方法再适合企业不过了
  • 【python计算机视觉编程——7.图像搜索】
  • 苹果宣布iOS 18正式版9月17日推送：支持27款iPhone升级
  • git为不同的项目设置不同的提交作者
  • 严重干扰的验证码识别系统源码分享
  • spark.sql
  • FaskAPI Web学习