Axios库相关

最新推荐文章于 2024-09-01 02:07:48 发布
最新推荐文章于 2024-09-01 02:07:48 发布
阅读量37 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uiyfgfhjfjk/article/details/131526909
版权

axios 的理解和使用

axios 是什么

  1. 前端最流行的 ajax 请求库
  2. react/vue 官方都推荐使用 axios 发 ajax 请求

axios 特点：

  1. 基于 xhr + promise 的异步 ajax 请求库
  2. 浏览器端/node 端都可以使用
  3. 支持请求／响应拦截器
  4. 支持请求取消
  5. 请求/响应数据转换
  6. 批量发送多个请求

axios 常用语法

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]):可以只指定 url 发 get 请求
axios.request(config):等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]):发 post 请求
axios.put(url[, data, config]):发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]):创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel():是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread():用来指定接收所有成功数据的回调函数的方法

axios的基本使用

JSON-Server 安装

在后台还没给接口之前，使用JSON-Server搭建一台JSON服务器，将接口要返回的数据放在json文件里面。然后请求这些数据，这样我们可以先做一些东西，等后台接口好了之后直接替换就可以了，不必一直傻傻的等后端的接口。

  • 安装json-server
    终端中执行：npm install -g json-server
  • 运行服务器
    终端中执行：json-server --watch db.json（报错：开头加npx）

实例：

  1. db.json文件
{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "posId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}
  1. html文件
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
        <button class="btn btn-warning"> 发送POST请求 </button>
        <button class="btn btn-success"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"> 发送 DELETE 请求 </button>
    </div>
    <script>
        //    获取按钮
        const btn = document.querySelectorAll("button");
        // 第一个绑定事件
        btn[0].onclick = function () {  //点击读取id为1的文章
            // 发送AJAX请求
            axios({
                // 请求类型
                method: "GET",

                url: 'http://localhost:3000/posts/1', //get请求需要加id

            }).then(response => {
                console.log(response);
            })
        };
        btn[1].onclick = function () {  // 点击增加文章
            // 发送AJAX请求
            axios({
                // 请求类型
                method: "POST",

                url: 'http://localhost:3000/posts', //post请求不需要加id
                // 设置请求体
                data: {
                    title: "今天天气很好！",
                    auther: "张三"
                }
            }).then(response => {
                console.log(response);
            })
        };
        btn[2].onclick = function () {  // 点击修改id为2文章的作者
            // 发送AJAX请求
            axios({
                // 请求类型
                method: "PUT",

                url: 'http://localhost:3000/posts/2', //put请求需要加id
                // 设置请求体
                data: {
                    title: "今天天气很好！",
                    auther: "李四"
                }
            }).then(response => {
                console.log(response);
            })
        };
        btn[3].onclick = function () {  // 点击删除id为2的文章
            // 发送AJAX请求
            axios({
                // 请求类型
                method: "DELETE",

                url: 'http://localhost:3000/posts/2', //delete请求需要加id
                
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>

axios.create(config)

  1. 根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置
  2. 新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
  3. 为什么要设计这个语法?
    (1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一
    样, 如何处理
    (2) 解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要
    求的接口请求中

拦截器

实例：

<body>
    <script>
        // Promise
        // 设置请求拦截器  config 配置对象
        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器 成功 - 1号');
            //修改 config 中的参数
            config.params = {a:100};

            return config;
        }, function (error) {
            console.log('请求拦截器 失败 - 1号');
            return Promise.reject(error);
        });

        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器 成功 - 2号');
            //修改 config 中的参数
            config.timeout = 2000;
            return config;
        }, function (error) {
            console.log('请求拦截器 失败 - 2号');
            return Promise.reject(error);
        });

        // 设置响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器 成功 1号');
            return response.data;
            // return response;
        }, function (error) {
            console.log('响应拦截器 失败 1号')
            return Promise.reject(error);
        });

        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器 成功 2号')
            return response;
        }, function (error) {
            console.log('响应拦截器 失败 2号')
            return Promise.reject(error);
        });

        //发送请求
        axios({
            method: 'GET',
            url: 'http://localhost:3000/posts'
        }).then(response => {
            console.log('自定义回调处理成功的结果');
            console.log(response);
        });
    </script>   
</body>

拦截器函数/ajax 请求/请求的回调函数的调用顺序

  1. 说明: 调用 axios()并不是立即发送 ajax 请求, 而是需要经历一个较长的流程
  2. 流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响
    应拦截器 2 => 请求的回调
  3. 注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是 config, 响应
    拦截器传递的是 response

取消请求

  1. 基本流程
    配置 cancelToken 对象
    缓存用于取消请求的 cancel 函数
    在后面特定时机调用 cancel 函数取消请求
    在错误回调中判断如果 error 是 cancel, 做相应处理
  2. 实现功能
    点击按钮, 取消某个正在请求中的请求
  3. 在请求一个接口前, 取消前面一个未完成的请求

实例：

<body>
    <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
        <button class="btn btn-warning" > 取消请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //2.声明全局变量
        let cancel = null;
        //发送请求
        btns[0].onclick = function(){
            //检测上一次的请求是否已经完成
            if(cancel !== null){
                //取消上一次的请求
                cancel();
            }
            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts',
                //1. 添加配置对象的属性
                cancelToken: new axios.CancelToken(function(c){
                    //3. 将 c 的值赋值给 cancel
                    cancel = c;
                })
            }).then(response => {
                console.log(response);
                //将 cancel 的值初始化
                cancel = null;
            })
        }

        //绑定第二个事件取消请求
        btns[1].onclick = function(){
            cancel();
        }
    </script>   
</body>

axios 源码分析

源码目录结构

在这里插入图片描述

源码分析

axios 与 Axios 的关系

  1. 从语法上来说: axios 不是 Axios 的实例
  2. 从功能上来说: axios 是 Axios 的实例
  3. axios 是 Axios.prototype.request 函数 bind()返回的函数
  4. axios 作为对象有 Axios 原型对象上的所有方法, 有 Axios 对象上所有属性

instance 与 axios 的区别

  1. 相同:
    (1) 都是一个能发任意请求的函数: request(config)
    (2) 都有发特定请求的各种方法: get()/post()/put()/delete()
    (3) 都有默认配置和拦截器的属性: defaults/interceptors
  2. 不同:
    (1) 默认配置很可能不一样
    (2) instance 没有 axios 后面添加的一些方法:create()/CancelToken()/all()

axios 运行的整体流程
在这里插入图片描述

  1. 整体流程:
    request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)

  2. request(config):将请求拦截器 / dispatchRequest() / 响应拦截器 通过 promise 链串连起来,
    返回 promise

  3. dispatchRequest(config):
    转换请求数据 => 调用 xhrAdapter()发请求 => 请求返回后转换响应数
    据. 返回 promise

  4. xhrAdapter(config):
    创建 XHR 对象, 根据 config 进行相应设置, 发送特定请求, 并接收响应数据,
    返回 promise

axios 的请求/响应拦截器是什么

  1. 请求拦截器:

（1）在真正发送请求前执行的回调函数
（2）可以对请求进行检查或配置进行特定处理
（3）成功的回调函数, 传递的默认是 config(也必须是)
（4）失败的回调函数, 传递的默认是 error

  1. 响应拦截器

（1）在请求得到响应后执行的回调函数
（2）可以对响应数据进行特定处理
（3）成功的回调函数, 传递的默认是 response
（4）失败的回调函数, 传递的默认是 error

axios 的请求/响应数据转换器是什么

  1. 请求转换器: 对请求头和请求体数据进行特定处理的函数
if (utils.isObject(data)) {
 	setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
 	return JSON.stringify(data);
}
  1. 响应转换器: 将响应体 json 字符串解析为 js 对象或数组的函数
    response.data = JSON.parse(response.data)

response 的整体结构

{
 data,
 status,
 statusText,
 headers,
 config,
 request
 }

error 的整体结构

{
 message,
response,
request,
}

如何取消未完成的请求?

  1. 当配置了 cancelToken 对象时, 保存 cancel 函数
    (1) 创建一个用于将来中断请求的 cancelPromise
    (2) 并定义了一个用于取消请求的 cancel 函数
    (3) 将 cancel 函数传递出来
  2. 调用 cancel()取消请求
    (1) 执行 cacel 函数, 传入错误信息 message
    (2) 内部会让 cancelPromise 变为成功, 且成功的值为一个 Cancel 对象
    (3) 在 cancelPromise 的成功回调中中断请求, 并让发请求的 proimse 失败,
    失败的 reason 为 Cancel 对象
uiyfgfhjfjk
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Axios面试题
golove666的博客
04-06 1027
Axios高频面试题。
axios库的使用
i_Satan的博客
03-29 275
安装axios 在文件根目录下,npm install axios 封装axios拦截器 在文件根目录下 创建一个 utils文件夹,然后创建一个request文件; ./request 文件下 import axios from "axios"; const request = axios.create({ baseURL:"http://localhost:8080/", timeout:5000, }) //封装一个请求拦截器 request.interceptors.request
axios详解
猫老板的豆
03-29 2267
Axios 是一个功能强大且易于使用的基于 Promise 的 HTTP 客户端库。可以用在浏览器和 node.js 中。这意味着它结合了 Promise 的特性和 HTTP 客户端的功能，为用户提供了一个强大且灵活的工具来发送 HTTP 请求和处理响应。
Axios 库相关
weixin_52841164的博客
04-30 852
这可以用于添加公共请求头、处理错误等需求。3. 设置请求头：通过 Axios 可以轻松设置请求头，包括 Content-Type、Authorization 等，以满足不同的 HTTP 请求需求。5. 取消请求：Axios 支持取消 HTTP 请求的功能，这对于一些需要在用户操作中断时取消请求的情况非常有用，以避免不必要的网络请求。4. 处理错误：Axios 能够捕获请求过程中的错误，例如网络错误、超时等，并将错误信息返回给调用方，方便进行错误处理和错误提示。首先，在项目中安装 Axios。
【React系列】网络框架axios库的使用
川峰的博客
01-03 1556
目前前端中发送网络请求的方式有很多种：选择一:传统的是基于选择二: 在前面的学习中, 我们经常会使用选择三: Fetch API选择四：axios支持多种请求方式:注意：下面的测试我都会使用https://httpbin.org这个网站来测试，是我个人非常喜欢的一个网站；我们来发送一个请求： 你也可以直接发送，那么就不需要传入（当然不传入默认也是请求） 当然，你也可以使用在中发送网络请求： 那么，有错误的时候，中如何处理呢？使用来处理错误信息 发送多个并发的请求： 选读：axios(config)和axio
TypeScript重构axios库
萌萌哒的瑞萌萌的博客
04-25 1591
需求分析 在浏览器端使用 XMLHttpRequest 对象通讯 支持 Promise API 支持请求和响应的拦截器 支持请求数据和响应数据的转换 支持请求的取消 JSON 数据的自动转换 客户端防止 XSRF 此外，还会有一些 axios 库支持的一些其它的 feature。 初始化项目 使用TypeScript library starter脚手架工具 先通过 git clone 把项目代码拉到 ts-axios 目录，然后运行 npm install 安装依赖，并且给项目命名。 生成的目录结构如
引用 ts-axios 库
Geordies的博客
01-05 273
# 引用 ts-axios 库 # 在 TS 项目中引用 我们借助于 vue-cli (opens new window) 脚手架创建一个 TypeScript 的 Vue 项目，然后我们把 Vue 官网上一段使用 axios 发请求的 demo (opens new window) 代码抄过来。 我们需要先执行 npm install ts-axios-new 安装 ts-axios 库。 ...
axios-decorators：具有Axios和JavaScript装饰器的HTTP客户端库
01-31
它是使用Axios和JavaScript装饰器的HTTP客户端库。 它受到流行的Android库启发。 依存关系 主要依赖项是Babel，它使用装饰器和类使JavaScript开发人员的生活更轻松。 因此，有两个依赖项，例如和 。 Axios和...
axios需要的js库文件
06-25
这个“axios需要的js库文件”压缩包很可能包含了axios库本身和其他可能与之配合使用的JavaScript工具或依赖。下面将详细讨论axios以及与之相关的JavaScript知识点。 1. **axios库**：axios是一个基于Promise的HTTP...
【鸿蒙版axios请求封装包】
06-03
在鸿蒙操作系统（HarmonyOS）的开发过程中，与网络通信相关的功能是非常关键的一部分。`axios`是一个在JavaScript世界中广泛使用的HTTP库，它支持Promise API，方便进行异步请求处理。然而，原生的`axios`并不直接...
axios库读不到cookie_Vue axios 跨域请求无法带上cookie的解决
weixin_39811036的博客
12-19 1180
Vue axios 跨域请求无法带上cookie的解决在main.js设置// 携带cookieaxios.defaults.withCredentials = true补充知识：VUE axios请求跨域时没有带上cookie或者每次cookie都改变这两天用VUE写管理后端时，碰到一个奇葩问题：我本地使用dev配置开发的时候 请求可以带上cookie信息 打包出来部署在服务器上 请求就没带上...
Window Performance API
Bruce__taotao的博客
08-28 1683
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1608
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
安防视频汇聚平台EasyCVR启动后无法访问登录页面是什么原因？
EasyCVR视频融合云平台的技术博客
08-27 711
以进程方式启动（./easycvr）时，清楚看到此时web端口【9004】被占用。更改端口后，EasyCVR视频汇聚平台可以正常访问了。
vue ref和reactive区别
灰海
08-25 6626
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
最新发布
cdcdhj的博客
09-01 319
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1137
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
前端通过draggable结合fabricjs实现拖拽至画布生成元素自定义编排功能
m0_52313178的博客
08-26 1197
前端通过draggable结合fabricjs实现拖拽自定义编排功能 太久没有更新了，主要最近行情不太好失业了一段时间，一度到怀疑人生，然后就是做的东西大多没有什么含金量，没什么好分享的就很尴尬。 刚好最近遇到一个奇葩的需求，一个基地管理的需求，由于项目中的基地很偏，地图上都定位不到，只能通过一个图片作为底图，然后在上面绘制一些图层，需要做一个自定义编排的需求，先上图: 上面是实现的demo，首先上html结构代码（技术栈：V3+TS+elementplus） <div class="massif-
如何在页面引入axios库
07-14
要在页面中引入axios库，你可以按照以下步骤操作： 1. 首先，确保你已经下载并安装了axios库。你可以通过在终端中运行以下命令来安装axios： ``` npm install axios ``` 2. 在你的HTML文件中，使用`<script>`标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值