最近做项目时用到了axios拦截器封装,记录一下,相信以后还会用到,直接来复制粘贴(/阴险脸)。
先提供一个链接axios中文文档,看看API。我英语不好,你也是。
拦截器有请求前拦截,请求响应后拦截,自定义拦截器,移除拦截器,文档里太详细,我再写出来就是浪费流量。
关键的代码部分
惭愧,这个代码的请求和响应不是我写的,我只是站在巨人的肩膀上,所以看的更远。当初搜拦截器的时候看到了博主的帖子,写的简直不要太棒了。那么为了不辜负博主,我必须Ctr+C,然后到VS中Ctr + V。
这里我只说一下此项目我的文件结构,真正要用还是进上面的链接去看那位博主的代码。
在“油条”下新建request文件夹,再下面放的就是http.js,里面就是封装的拦截器了。顺便把axios.get()和axios.post()两个方法封装一下暴露出去。(后悔当初没有把文件结构做的再模块一些)
在http.js里粘贴如下代码:
import axios from 'axios'
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 一些错误状态码的处理
const errHandle = (status) => {
switch (status) {
// 请求不存在
case 404:
tip('请求的资源不存在');
break;
// 其他原因
default:
console.log("other reasons")
}
}
// 请求拦截器
axios.interceptors.request.use(
// 查看本地是否有token,有token就带过去
config => {
// console.log(config)
if (localStorage.getItem('token')) {
config.headers['x-user-token'] = localStorage.getItem('token')
}
return config
},
err => {
return Promise.reject(err)
}
)
// 响应拦截器
axios.interceptors.response.use(
// res=>console.log(res),
res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
err => {
errHandle(err)
return Promise.reject(err.status)
}
)
// 封装get
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(
res => {
resolve(res)
}
).catch(
err => {
reject(err)
}
)
})
}
// 封装post
export function post(url, data) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(
res => {
resolve(res)
}
).catch(
err => {
reject(err)
}
)
})
}
下一步就是项目里要用到的Api。我在src下新建api文件夹,
里面放的是各个组件要用到的请求数据的api。先把http.js下封装的get和post引进来,定义方法使用post/get请求数据。
举个栗子(我用post):
import { post } from '../util/request/http'
export const getNewsList = (currentPage, pageSize) => {
return post(newsListUrl, {
"current": currentPage,
"pageSize": pageSize
}).then(
res => {
return Promise.resolve(res)
}
).catch(err => {
return Promise.reject(err)
})
}
最后就可以在组件里愉快地使用getNewsList
进行数据获取,然后渲染到DOM了。篇幅过长我就不想写了。
-------------------END----------------------