axios 一个实用的 http 请求库,github 上已介绍其特性、兼容性、安装、简单使用、配置项等。基于上述官方介绍,封装了一下请求方式:
import axios from 'axios'
// 多环境配置
const baseURL = process.env.NODE_ENV === 'development'
? 'http://localhost:4000'
: 'http://localhost:4000'
// 请求拦截器(避免重复请求)
axios.interceptors.request.use(
config => {
let requestName = config.data.requestName
if (requestName) {
if (axios[requestName] && axios[requestName].cancel) {
axios[requestName].cancel(`${requestName} 请求被取消`)
}
config.cancelToken = new axios.CancelToken(c => {
axios[requestName] = {}
axios[requestName].cancel = c
})
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器(判断后台返回的状态码)
axios.interceptors.response.use(
config => {
return config
},
error => {
console.log(error)
let errMsg = ''
if (error && error.response) {
const map = new Map([
[400, '错误请求'],
[401, '未授权,请重新登录'],
[403, '拒绝访问'],
[404, '请求错误,未找到该资源'],
[405, '请求方法未允许'],
[408, '请求超时'],
[500, '服务器端出错'],
[501, '网络未实现'],
[502, '网络错误'],
[503, '服务不可用'],
[504, '网络超时'],
[505, 'http版本不支持该请求']
// ...
])
const defaultErrorMsg = `连接错误,服务器返回的状态码为 ${error.response.status}`
errMsg = map.get(error.response.status) || defaultErrorMsg
} else {
errMsg = "连接到服务器失败"
}
return Promise.reject(errMsg)
}
)
// get、post 请求方式地统一封装
export default ({ url, data = {}, params = {}, ...args }) => {
return new Promise((resolve, reject) => {
axios({
baseURL,
url,
params,
data: {
...data,
requestName: url.split('/').slice(-1).pop()
},
...args
})
.then(res => resolve(res))
.catch(err => {
// 这里可以用全局 UI 函数提醒用户
reject(err)
})
})
}
// 请求举例
/**
get 请求:
await request({
method: 'get',
url: '/user/12345',
params: {
name: 'Bob',
age: 20
}
})
post 请求:
await request({
method: 'post',
url: '/user/12345',
data: {
name: 'Bob',
age: 20
}
})
*/
请求之前做数据转换?创建 axios 示例?axios 全局默认配置... 这些在 github 上官方已给出示例。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。