特点:
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请求
- 自动转换JSON数据
- 浏览器端支持防止CSRF(跨站请求伪造)
axios的相关配置信息
axios的并发请求
axios.all([axios({
url:'http://127.0.0.1:8080/home'
}),axios({
url:'http://127.0.0.1:8080/index'
})]).then(axios.spread((res1,res2)=>{
console.log(res1) // 这一个res1是打印的 第一个请求返回的信息
console.log(res2) // 这一个res2是打印的 第二个请求返回的信息
}))
axios的实例和模块封装和请求拦截
拦截分为
- 请求成功拦截
- 请求失败拦截
- 响应成功拦截
- 响应失败拦截
export function request(config) {
// 1、创建axios实例
const instance = axios.create({
baseURL:'http://...'
timeout:5000 // 设置请求超时 时间
})
// 2、axios的拦截器
instance.interceptors.request.use(config=>{
//注意,这里的参数也可以不是config,可以使任意的,但是在请求成功时获取到的结果就是请求时的配置信息,所以这里见名思意参数就写config
// 这里是 发送请求成功时
请求拦截的作用
1、比如config中恶一些信息不符合服务器的要求
2、比如每次发送网络请求时,都希望在界面显示一个图标。可以在这里显示,然后在响应成功时再关闭掉
3、某些网络请求,比如登录token,必须携带一些特殊的信息;
console。log(config) // 打印的结果是,请求时的配置信息
}, err =>{
// 请求失败时,比如没网络,这种情况一般出现的很少
console.log(err)
});
// 响应拦截
instance.interceptors.use.response.use(res =>{
// 响应成功
return res.data // 返回响应获取到的data数据
},err =>{
// 响应失败, 比如,接口地址写错了
console.log(err)
})
// 3、发送真正的网络请求
return instance(config) // 这个返回的是一个 promise
}
这就是一个大致的 axios 请求的封装,如果有啥写错的地方,还请各位大佬提出来。