day20JS-axios数据通信

傻虎贼头贼脑2024-09-13 13:13

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文件中引入

方法一：外部引入

html 复制代码 
<script src="./node_modules/axios/dist/axios.js"></script>

方法二：内部引入

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

3. 简单的get请求

写法一：

javascript 复制代码 
<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>

写法二：

html 复制代码 
<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 配置方法一

配置模板：

javascript 复制代码 
        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);
        });

案列：

javascript 复制代码 
<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 配置方法二

配置模板：

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

案列：

javascript 复制代码 
<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 配置方法一

配置模板：

javascript 复制代码 
        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);
        });

案列：

javascript 复制代码 
<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 配置方法二

配置模板：

javascript 复制代码 
        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);
        });

案列：

javascript 复制代码 
<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：

javascript 复制代码 
<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改为解构 ，下面有两种解决方法，推荐使用写法一。

javascript 复制代码 
<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文件。
javascript 复制代码 
// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";

// 默认导出axios接口
export default axios;
  1. 在html文件中使用它
javascript 复制代码 
<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文件:

javascript 复制代码 
// 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文件:

javascript 复制代码 
<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文件:
javascript 复制代码 
// 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;
  1. 创建一个request2.js文件:
javascript 复制代码 
// 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;
  1. 创建一个html文件，引入request1.js文件和request2.js文件。
javascript 复制代码 
<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文件:
javascript 复制代码 
// 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;
  1. 创建一个html文件，引入request1.js文件。
html 复制代码 
<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就可以跳转到登录页面。

案列：

javascript 复制代码 
// 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;
相关推荐
敲代码不忘补水8 分钟前
二十种编程语言庆祝中秋节
java·javascript·python·golang·html
我码玄黄15 分钟前
JS 的行为设计模式：策略、观察者与命令模式
javascript·设计模式·命令模式
营赢盈英28 分钟前
OpenAI API key not working in my React App
javascript·ai·openai·reactjs·chatbot
范特西是只猫1 小时前
echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】
前端·javascript·echarts
麒麟而非淇淋1 小时前
AJAX 进阶 day4
前端·javascript·ajax
代码搬运媛5 小时前
el-table 如何实现行列转置？
javascript·vue.js·elementui
+码农快讯+7 小时前
JavaScript 基础 - 第17天_AJAX综合案例
开发语言·javascript·ajax
+码农快讯+7 小时前
JavaScript 基础 - 第16天_AJAX入门
javascript·ajax·okhttp
右恩9 小时前
【已解决】关于错误 UnicodeEncodeError: ‘gbk‘ codec can‘t encode character
javascript·python·pycharm
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04CCF-CSP认证考试 202406-3 文本分词 100分题解05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文102024 高教社杯 数学建模国赛 （A题）深度剖析|“板凳龙” 闹元宵|数学建模完整代码+建模过程全解全析