一 Axios的概念
Axios是什么？
Axios是一个基于promise的HTTP库，主要用于浏览器和node.js。
Axios有哪些特性？
支持Promise API
拦截请求和响应请求
转换请求数据和响应数据（请求是可以加密，在返回时也可进行解密）
取消请求
自动转换JSON数据（无需手动操作）
客户端支持防御XSRF攻击
Axios常用的请求方法？
get：获取数据
post ：提交数据，表单提交或文件上传等。
put ：更新数据（所有数据推送到后端）
patch ：更新数据（只将修改的数据推送到后端）
delete：删除数据
Axios的安装与引用：
npm add axios // 安装axios
import axios from "axios"; // 引用axios
Axios的请求方法demo：
get：
// 写法一
axios.get("", {
params: {
limit: 1,
page: 10,
order: "Desc",
},
})
.then((res) => {
console.log(res);
});
// 写法二
axios({
method: "get",
url: "Desc"},</p> <p> }).then((res) => {</p> <p> console.log(res);</p> <p>});</p> <p>post：</p> <p>post的两种请求格式：</p> <p>form-data （常用于文件/图片上传）：content-type: multipart/form-data; boundary=----WebKitFormBoundaryK0A5EtRCDRaTJb7x boundary(后端解码内容)</p> <p>application/json 常用格式，如data：content-type: application/json; charset=utf-8</p> <p>// 请求方式一：application/json</p> <p>// 写法一</p> <p>let dataTest = {</p> <p> image_id: "asf2",</p> <p> sub_id: "my-user-1234",</p> <p> value: 1,</p> <p>};</p> <p>axios.post("", dataTest).then((res) => {</p> <p> console.log(res);</p> <p>}); </p> <p>// 请求方式二：form-data</p> <p>// 写法二</p> <p>let formData = new FormData();</p> <p>formData.append("image_id", "asf2");</p> <p>formData.append("sub_id", "my-user-1234");</p> <p>formData.append("value", '1');</p> <p>axios({</p> <p> method: "post",</p> <p> url: "",</p> <p> data: formData, // params 参数在请求体内</p> <p>}).then((res) => {</p> <p> console.log(res);</p> <p>});</p> <p>delete：</p> <p>let vote_id = '318737'</p> <p>axios.delete().then(res=>{</p> <p> console.log(res)</p> <p>})</p> <p>Axios并发方法：</p> <p> 并发请求：同时进行多个请求，并统一处理返回值。</p> <p>// axios.all() 是一个数组，存放axios请求，数组顺序即请求数据</p> <p>// axios.spead() 是多个请求(axios.all())完成后,对它的返回数据进行分割处理</p> <p>axios.all(【</p> <p> axios.get("Desc"}),
axios.get('')
】).then(
// 并发的then不能只写一个回调请求
axios.spread((catApi,dogApi)=>{
console.log(catApi,dogApi)
})
)
Axios 实例：
axios通过创建axios.create实例。
let instance = axios.create({
baseURL:'',
timeout:1000
})
instance.get('').then(res=>{
console.log(res)
})
Axios 实例相关配置：
baseURL：请求的基础地址，请求接口时会拼接在baseURL后面
timeout：请求的超时时长(毫秒)，如果请求的数据量比较大，会堵塞后端内容，然后超时释放超时内容。
url：请求的路径
method：请求的方法，get,post,pull,patch,delete
headers：请求头，存放token。
params：请求参数拼接在url上
data：请求参数拼接在请求体内
let instance = axios.create({
baseURL:'',
timeout:1000,
url:'',
method:'get',
headers:{
token:''
},
params:{},
data:{}
})
Axios配置的三种方式：
全局配置：axios.defaults
实例配置：axios.create，如果不添加参数则默认使用全局配置
请求配置：用于处理一些特殊接口，如数据量比较大，需要单独增加超时时长
配置优先级：全局配置 < 实例配置 < 请求配置
// 1.axios全局配置 axios.defaults
axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 1000
// 2.axios实例配置，如果不添加参数则默认使用全局配置
let instance2 = axios.create({})
// 3.axio请求配置,用于处理一些特殊接口，如数据量比较大，要单独增加超时时长
instance.get('https://dog.ceo/api/breeds/image/random',{
timeout:5000
}).then(res=>{
console.log(res)
})
Axios请求多个域名接口：
// Axios请求多个域名接口：
let instance = axios.create({
baseURL:'',
timeout:1000,
})
let instance2 = axios.create({
baseURL:'',
timeout:3000,
})
// 请求不同的域名接口
instance.get('/').then(()=>{console.log})
instance2.get('/',{timeout:5000}).then(()=>{console.log})
Axios拦截器：
拦截器：在请求或响应被处理前拦截它们
请求拦截器：在前端发起//代码效果参考：http://hnjlyzjd.com/xl/wz_24549.html
请求前处理响应拦截器：在后端响应请求后处理
取消拦截器（不常用）
// 请求拦截器：在前端发起请求前处理
axios.interceptors.request.use(
(config) => {
// 发送请求前做些什么，如判断是否有token
return config;
},
(Error) => {
// 请求错误时返回
return Promise.reject(Error);
}
);
// 响应拦截器：在后端响应请求后处理
axios.interceptors.response.use(
(res) => {
// 请求成功后做些什么，如判断后端返回的code状态码
return res;
},
(Error) => {
// 响应错误做些什么
return Promise.reject(Error);
}
);
instance.get("/").then((res) => {
console.log(res);
}); // then请求失败
instance2.get("/", { timeout: 5000 }).catch((Error) => {
console.log(Error);
}); // catch请求失败
// 取消拦截器（不常用）
let interceptors = axios.interceptors.response.use((config) => {
// 请求之前可以在headers中新增auth参数
config.headers = {
auth: true,
};
return config;
});
// 取消headers中的auth
axios.interceptors.request.eject(interceptors);
Axios拦截器demo：
请求与响应拦截器的处理
// 例一：登录（token）
let instance3 = axios.create({}); // 访问需要token的接口
instance3.interceptors.request.use((config) => {
config.headers.token = "登录返回的token";
return config;
});
let instance4 = axios.create({}); // 访问不需要token的接口
// 例二：请求中的loading提示
let instancePhone = axios.create({});
instancePhone.interceptors.request.use((config) => {
// $('#loading').show 加载中打开
return config;
});
instancePhone.interceptors.response.use((res) => {
// $('#loading').hide 加载中关闭
return res;
});
Axios取消请求
// Axios取消请求
// source()方法生成了一个取消请求的CancelToken、
let source = axios.CancelToken.source()
axios.get('/data.json',{
cancelToken:source.token
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err,)
})
// 取消请求，cancel中的参数会进入到catch中。cancel('参数可选')
source.cancel('cancel http')
