💥此MD/PDF/HTML文档由 @竹梦者也 编辑制作,不可贩卖❌。仅供学习交流使用,下载后切勿随意传播。转载麻烦加上出处~

📌欢迎在留言区提供修改建议~

💌本文内容和代码来自于李强老师的axios教程

 

✅2021.7.17 @竹梦者也(https://www.zjgsuzjx.top)

 

 

 

一、axios入门

一、前期准备工作

1. 安装

快速安装虚拟服务器:https://github.com/typicode/json-server

安装axios:https://github.com/axios/axios

2. 虚拟服务器说明

创建db.json至文件夹根目录:

npm安装:npm install -g json-server

启动服务器:json-server --watch db.json

二、axios 的理解和使用

1. 概念

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

官方中文文档: https://axios-http.com/zh/docs/intro

2. 特点

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

3. 引入

使用时:

研究源码时:npm install axios

4. 快速使用

注意:下述方法都是基于前面提到的虚拟服务器环境。

基本语法格式:axios({请求类型}).then(response => {响应结果})

和Promise语法基本一致。

请求类型里可以填入methodurldata等配置。

响应内容response是一个对象,里面含有配置对象、响应头、响应结果以及原生AJAX的异步XMLHTTP请求。

# 发送GET请求
# 发送POST请求
# 发送PUT请求
# 发送DELETE请求

5. 常用语法

# axios.request

等同于 axios(config)

# axios.post

发 post 请求

6. response分析

d9a5050ee5f1f26e24e6d65a44af4fbd.png

7. 配置axios默认配置

优势:通过默认配置,可以方便在后面使用同一请求时,不需要写多余的代码。

8. axios创建实例对象

好处:如果要对多个不同地址发送请求,可以通过构建对象的方式,对多个不同的请求对象多次发送请求,节省代码,也就是默认配置的plus版。

9. 拦截器

请求拦截器:在发送请求前,进行一些预处理,满足则放行。

响应拦截器:在接受响应之前,进行一些预处理,满足则放行。

请求拦截器语法:

axios.interceptors.request.use(config=>{ },error=>{ })

响应拦截器语法:

axios.interceptors.response.use(response=>{ },error=>{ })

跟Promise语法极其相似

上面的执行顺序为请求2-请求1-响应1-响应2,请求拦截器是先进后出,响应拦截器是先进先出(原因在源码分析中会解释)

备注:在请求拦截器中可以设置config中的参数,如设置parms;在响应拦截器中可以设置response的参数,如设置返回响应主体response.data

10. 请求取消

可以设置在请求到达本地之前取消本次请求。常常用在抢购商品时,避免用户多次请求造成服务器压力过大,因此可以设置在第一次请求到达之前,自动取消发送的所有请求。

演示延迟:json-server --watch db.json -d 2000

可以通过cancel()取消上次请求。

二、axios源码分析

未完待续.......