Vue学习第十天
Vue10
一.
1.axios (这里测试url可以去httpbin.org取url测试)
axios({
url: "#",
method: "post"
}).then(res => {
console.log(res);
})
2.专门争对get请求的参数拼接
axios({
url: "#",
param: {
type: "sell",
page: 1
}
}).then(res => {
console.log(res);
})
3.axios发生并发请求
axios.all([axios({
url: "#",
}),axios({
url: "#"
})]).then(results => {
console.log(results);
})
这里axios.all[()]返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为res1,res2
axios.all([axios({
url: "#",
}),axios({
url: "#"
})]).then(axios.spread((res1,res2) => {
console.log(res1);
console.log(res2);
}))
4.axios全局配置
axios.defaults.baseURL = "http://httpbin.org"
axios.defaults.timeout = 5000 //超时时间 ms
axios({
url: "/post",
method: "post"
}).then(res => {
console.log(res);
})
5.常见的配置选项
6.axios的实例
const instance1 = axios.create({
baseURL: "http://httpbin.org",
timeout: 5000
})
instance1({
url: "/get"
}).then(res => {
console.log(res);
})
instance1({
url: "/post",
method: "post"
}).then(res => {
console.log(res);
})
如果不止一个服务器的请求，可以再create一个
7.
axios封装
创建network文件夹可以封装多个axios转存失败重新上传取消
8.
axios拦截器
1.请求拦截
instance.interceptors.request.use(config => {
console.log(config);
return config;
})
用途：
①比如config中的一些信息不符合服务器的要求
②比如每次发送网络请求时，都希望在界面中显示一个请求图标
③某些网络请求（比如token），必须携带一些特殊的信息
2.响应拦截
instance.interceptors.response.use(res=> {
console.log(res);
return res.data;
}),err => {
console.log(err);
}
用途：
①响应的成功拦截中，主要是对数据进行过滤
②响应的成功拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面