day21JS-axios数据通信

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;