细谈Axios中那些不为人知的秘密！一文读懂Axios

Posted 2022-05-12 前端纸非机

Axios介绍

1、Axios是什么？

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

2、Axios特性

（1）支持Promise API

（2）拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。

（3）转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。

（4）取消请求

（5）自动转换JSON数据

（6）客户端支持防御XSRF

3、浏览器支持情况

Firefox、Chrome、Safari、Opera、Edge、IE8+。

---

Axios基本使用

yarn add axios

import axios from "axios"
axios.get("/data.json").then(res=>
    console.log(res)
).catch(err=>
    console.log(err)
)

打开控制台瞅两眼，已经有数据了 

---

Axios常用请求方法

方法列举：get, post, put, patch, delete等。

• get：一般用户获取数据
• post：一般用于表单提交与文件上传
• patch：更新数据（只将修改的数据推送到后端）
• put：更新数据（所有数据推送到服务端）
• delete：删除数据

备注：post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。

1、get方法

方式一

axios
      .get("/data.json",  
        params:  
          id: 12
        
      )
      .then(res =>  
        console.log(res);
      )
      .catch(err =>  
        console.log(err);
      );

方式二

axios( 
      method: "get",
      url: "/data.json",
      params: 
          id:12
      
    ).then(res =>  
      console.log(res);
    );

带有参数后get请求实际是http://xxxxx/data.json?id=12，写了这么多结果就是url加了参数。

浏览器控制台相关信息介绍：

1. Request URL：请求URL
2. Request Method：请求方式

2、post方法

post请求常用的数据请求格式有两种：

1.form-data（常用于表单提交（图片上传、文件上传））

let data = 
  id: 12
;
let formData = new FormData();
for(let key in data) 
  formData.append(key,data[key])

console.log(formData)
axios.post(/data.json,formData).then(res=> 
  console.log(res,formData)
)

注意：请求地址Request URL: http://xxxxxxx/data.json，

请求头中Content-Type: multipart/form-data; boundary=——WebKitFormBoundarydgohzXGsZdFwS16Y

参数形式：id:12

2.application/json（常用）

方式一

let data = 

  id: 12
;
axios.post("/data.json", data).then(res=> 
  console.log(res, post)
);

方式二

let data = 
  id: 12
;
axios( 
  method:post,
  url:/data.json,
  data:data
).then(res=> 
  console.log(res)
)

注意：请求地址Request URL: http://xxxxxxxx/data.json，

请求头中Content-Type: application/json;charset=UTF-8

参数形式： id:12

3、put方法

let data =  
    id: 12
;
axios.put("/data.json", data).then(res=> 
    console.log(res, put)
);

4、patch方法

let data =  
  id: 12
;
axios.patch("/data.json", data).then(res=> 
  console.log(res, patch)
);

5、delete方法

方式一：params

axios
      .delete("/data.json",  
        params:  
          id: 12
        
      )
      .then(res =>  
        console.log(res, "delete");
      );
let params =  
      id: 12
    ;
    axios( 
      method:delete,
      url:/data.json,
      params:params
    ).then(res=> 
      console.log(res)
    )

方式二：data

axios
      .delete("/data.json",  
        data:  
          id: 12
        
      )
      .then(res =>  
        console.log(res, "delete");
      );
let data =  
      id: 12
    ;
    axios( 
      method:delete,
      url:/data.json,
      data:data
    ).then(res=> 
      console.log(res)
    )

注意：params方式会将请求参数拼接在URL上面，Request URL: http://xxxxxxxx/data.json?id=12

参数形式：id:12

Content-Type: text/html; charset=utf-8

data方式不会讲参数拼接，是直接放置在请求体中的，Request URL: http://xxxxxxxx/data.json

参数形式：id:12

Content-Type: application/json;charset=UTF-8

总结：上述方法中均对应两种写法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；

6、并发请求

并发请求，就是同时进行多个请求，并统一处理返回值。类似promise.all。

在下面例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：

// 并发请求
axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
   axios.spread((dataRes, cityRes) =>  
        console.log(dataRes, cityRes);
   )
);

注意：axios.all的参数是请求函数的数组，在对应的回调then中，调用axios.spead对返回值进行处理，即可。

并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。

---

Axio实例

1、axios实例的创建

比如：后端接口地址有多个（www.test.com、www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们可以创建实例。

思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求。代码如下：

// 实例1
let instance = axios.create( 
  baseURL:http://loacalhost:8080,
  timeout:1000
)
instance.get(/data.json).then(res=> 
  console.log(res)
)
//实例2
let instance2 = axios.create( 
  baseURL: "http://loacalhost:8081",
  timeout: 2000
);
instance2.get("/city.json").then(res =>  
  console.log(res);
);

备注：此时我们就可以访问http://loacalhost:8080与http://loacalhost:8081两个不同域名的接口，并且使用不同的配置。

2、axios实例的相关配置

（1）配置列表

• baseURL：请求的域名（基本地址）。
• timeout：请求的超时时长，超出后后端返回401。
  备注：一般由后端定义，后端的接口需要的处理时长较长的时候，如果请求的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，可以及时释放掉。
• url：请求路径。
• method：请求方法。如：get、post、put、patch、delete等。
• headers：请求头。
• params：将请求参数拼接到url上
• data：将请求参数放置到请求体里 

axios.create(
    baseURL:, //请求的域名（基本地址）
    timeout:2000, //请求的超时时长，单位毫秒，默认。
    url:/data.json, //请求路径
    method:get, //请求方法
    headers: 
        token:
    , //设置请求头
    params: 
    ,//将请求参数拼接到url上
    data: 
    , //将请求参数放置到请求体里
);

（2）三种配置方式

• axios全局配置

axios.defaults.baseURL = ‘http://localhost:8080‘

axios.defaults.timeout = 2000

• axios实例配置

let in
以上是关于细谈Axios中那些不为人知的秘密！一文读懂Axios的主要内容，如果未能解决你的问题，请参考以下文章
 
 细谈Axios中那些不为人知的秘密！一文读懂Axios
 细谈Axios中那些不为人知的秘密！一文读懂Axios
 Activity那些不为人知的秘密
 关于Map集合那些不为人知的秘密
 Linux内核页表管理-那些鲜为人知的秘密
 Unix 不为人知的秘密？