锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识秘密不为人知

人生处万类,知识最为贤。这篇文章主要讲述细谈Axios中那些不为人知的秘密！一文读懂Axios相关的知识，希望能为你提供帮助。


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 = https://www.songbingjia.com/android/
id: 12
;
let formData = https://www.songbingjia.com/android/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 = https://www.songbingjia.com/android/

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

方式二
let data = https://www.songbingjia.com/android/
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 =https://www.songbingjia.com/android/
id: 12
;
axios.put("/data.json", data).then(res=>
console.log(res, put)
);

4、patch方法
let data =https://www.songbingjia.com/android/
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 =https://www.songbingjia.com/android/
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:
, //将请求参数放置到请求体里
);

【细谈Axios中那些不为人知的秘密！一文读懂Axios】（2）三种配置方式
  • axios全局配置
axios.defaults.baseURL = ‘http://localhost:8080‘

axios.defaults.timeout = 2000

  • axios实例配置
let in

    推荐阅读


    上一篇：帮你“开窍”。

    下一篇：linux之iftop命令