# axios实例
# 创建实例
创建 axios 实例：axios.create()
const http = axios.create({
// 基准地址
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
1
2
3
4
5
6
2
3
4
5
6
# 请求配置
url是用于请求的服务器 URL：url: '/user',method是创建请求时使用的方法：method: 'get'params与请求一起发送的 URL 参数，如查询参数等。params: { ID: 12345 }data作为请求主体被发送的数据，只适用于这些请求方法post、patch、put。data: { firstName: 'Fred' },baseURL基准地址，将自动加在url前面，在请求前缀都相同的情况下，使用此选项，避免重复写前缀。除非url是一个绝对 URL。baseURL: 'https://some-domain.com/api/'headers是即将被发送的自定义请求头，比如在请求头加上token。headers: { Authorization: 'Bearer sifskfjsdfjiewo' }
# 请求拦截器
在请求或响应被 then 或 catch 处理前拦截它们。也就是在所有的请求发出去之前都将经过请求拦截器，并在内部对所有的请求做出统一处理，之后再发出。 官方文档 - axios拦截器 (opens new window)
// 不用记，直接官方文档copy
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
应用 对请求统一设置token:
- 原因：访问网站的很多部分，都需要在请求中携带token才有权限访问。那统一在拦截器中设置token就省了一个一个的加上。
- 使用
- 用户登录后，我们设置token存到 localstorage 和 vux 中。
http.interceptors.request.use(function (config) {
// 在请求发送出去之前, 统一携带token
const userInfo = getUser()
// 判断是否有 token, 如果有, 就携带上
if (userInfo.token) {
config.headers.Authorization = `Bearer ${userInfo.token}`
}
return config
}, function (error) {
return Promise.reject(error)
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11