axios的基础使用
axios的基础使用
特点:
1.基于promise的异步ajax请求库
2.浏览器端、node端都能用
3.支持请求、响应拦截器
4.支持请求取消
5.请求、响应数据转换
6.批量发送多个请求
使用:
默认get请求:axios({url: ""}).then(res=> {console.log(res), err=>{console.log(err)}})或者axios.get("/get", {}).then()
post请求:axios({url: "", method: "post"}).then()或者axios.post("/post", {}).then()
put请求:axios({url: "", method: "put"}).then()或者axios.put("/put", {}).then()
delete请求:axios({ur: "", method: "delete"}).then()或者axios.delete("/delete", {}).then()
axios.get()请求和axios.delete()请求,接收两个参数,URL和config配置对象
axios.post()请求和axios.put()请求,接收三个参数,URL、请求体和config配置对象
请求的相应结果分析:
配置对象常用的配置项:
URL: “/user” 路径URL
method:”get" 请求方法:默认get
basURL:"http:localhost:8080/" 基础URL,最终请求的URL是baseURL+URL拼接起来的,在全局设置默认,可以使得发送请求的URL变得简洁
headers:{ “X-Requested-With”: “XMLHttpRequest” } 设置请求头
params:{ id: 12345, name: 'jack' } 设置请求URL的query参数
data: { firstName:’fred' } 设置请求体 也可以直接设置成字符串 data:“firstName=fred”
timeout:1000 请求超时,单位毫秒,默认0,不超时
responseType:"json" 设置响应数据类型,默认json
responseEncoding:“utf8” 响应数据的编码格式,默认是uuf-8
maxContentLength:2000 响应体的最大长度
maxBodyLength:2000 请求体的最大长度
validateStatus:function (status) { return status >=200 && status < 300 } 设置响应状态码为多少时是成功,调用resolve,否则调用reject失败,默认是大于等于200,小于300
可以使用axios.defaults.baseURL="" 的格式设置全局默认配置,为了避免多种重复配置在不同的请求中重复
axios.create()
axios.create(config)对axios请求进行二次封装
1.根据指定配置创建一个新的axios,也就是每个axios都有自己的配置
2.新的axios只是没有取消请求和批量请求的方法,其他所有的语法都是一致的
3.为什么要这种语法?
1)需求,项目中有部分接口需要的配置与另一部分接口的配置不太一样
2)解决:创建两个axios,每个都有自己的配置,分别对应不同要求的接口请求中
简单使用:(同时请求多个端口号)
const instance = axios.create({ baseURL: "http://localhost:3000" })
const instance2 = axios.create({ baseURL: "http://localhost:4000" })
instance({url: '/get'})
instance2({url: '/get'})
axios拦截器:
1.请求拦截器:用于拦截请求,自定义做一个逻辑后再把请求送出,可以用于配置公用的逻辑,就不用每个请求都配一遍了
使用:
// 添加请求拦截器 传入两个回调,第一个成功回调,第二个失败回调
axios.interceptors.request.use(
(config) => {
// config配置可用于发送网络请求时,在页面显示一个同步的动画
// 某些请求(比如登录(token))必须带一些特殊的信息
// 请求成功拦截
console.log("请求拦截器");
return config;
},
(err) => {
// 请求失败拦截
return Promise.reject(err);
}
);
2.响应拦截器:用于拦截响应,做一些处理后再出发响应回调
使用:
// 添加响应拦截器 传入两个回调,第一个是成功回调,第二个是失败回调
axios.interceptors.response.use(
(res) => {
// res响应结果
// 响应成功拦截
console.log("响应拦截器");
return res;
},
(err) => {
// 响应失败拦截
return Promise.reject(err);
}
);
在添加了多个拦截器之后,请求拦截器类似栈,后进先出,先添加的反而后执行,后添加的先执行,响应拦截器类似队列,先进先出,执行顺序按照添加的顺序进行。
取消请求
取消请求就是发送了请求后,等一段时间得不到回应,可以取消他。
axios发送请求时,添加cancelToken配置项可以用于取消请求,cancelToken的取值方式有两种:
1.axios有一个CancelToken属性,是一个类,可以用于获取取消请求的cancel方法,获取该方法后可以在合适的地方执行cancel()取消请求,可以用于取消多个请求
使用:
const CancelToken = axios.CancelToken;
let cancel;
axios.get("/get", {
cancelToken: new CancelToken(function (c) {
cancel = c;
}),
});
cancel();
2.CancelToken有一个source静态方法,调用之后返回一个对象,该对象包含一个token属性,用于标记请求和一个cancel方法,用于取消请求
使用:
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get("/ge", { cancelToken: source.token });
source.cancel();
基本流程:1.配置cancelToken对象,2.缓存用于取消请求的cancel函数,3.在后面特定时机调用cancel函数取消请求,4.在错误回调中判断,如果err是cancel,做相应处理。
使用1:
// 第一步:定义一个cancel的全局变量,初始值是null
let cancel = null;
axios
.get("/get/", {
// 第二步:在请求的配置对象中,配置cancelToken属性值,并把函数的c参数赋值给全局变量cancel
cancelToken: new axios.CancelToken((c) => {
cancel = c;
}),
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
// 第三步:调用cancel函数就是取消请求接收
cancel();
使用2:在请求拦截器里面统一添加取消请求
axios.interceptors.request.use(
(res) => {
res["cancelToken"] = new axios.CancelToken(function (c) {
cancel = c
});
return res;
},
(err) => {
return Promise.reject(err);
}
);
使用3:在响应拦截器里面统一添加取消请求
axios.interceptors.response.use(
(res) => {
return res;
},
(err) => {
// 如果错误是取消请求引起的则中断promise链接
if (axios.isCancel(err)) {
// 中断promise链接
return new Promise(() => {});
} else {
// 将错误继续向下传递
return Promise.reject(err);
}
}
);
// 实现上一个接口还未响应,下一个接口开始请求,把上一个接口取消
let cancel;
axios.interceptors.request.use(
(config) => {
if (typeof cancel === "function") {
cancel("强制取消了请求");
}
config["cancelToken"] = new axios.CancelToken(function (c) {
cancel = c;
});
return config;
},
(err) => {
return Promise.reject(err);
}
);
axios.interceptors.response.use(
(res) => {
cancel = null;
return res;
},
(err) => {
cancel = null;
if (axios.isCancel(err)) {
console.log("取消上一个请求");
// 中断Promise链接
return new Promise(() => {});
} else {
// 把错误继续向下传递
return Promise.reject(err);
}
}
);
更多推荐
所有评论(0)