介绍
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。也是vue.js作者推荐的库
实现功能
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
浏览器支持
浏览器兼容性.png
项目中需要配置完成的功能
创建axios实例，统一配置实现如下功能
-
axios本身的配置- 配置URL前缀
- 超时时间
- 跨域cookie
- ...
- HTTPRequest拦截器
- 调用加载信息
- 请求头中加入身份验证
Token - 针对
IE浏览器GET请求缓存的处理 - ... 其它业务代码
- HTTPResponse拦截器
- 隐藏加载信息
- 针对返回值统一处理
- ....其它业务代码
具体封装代码如下：
其中部分业务代码已经被摘除，实现思路仅供参考
import axios from 'axios'
import store from '@/store'
import { Loading, Message, MessageBox } from 'element-ui'
// 加载顶部进度条
import NProgress from 'nprogress'
NProgress.configure({ showSpinner: false })
// 关闭nprogress和loading
function closeLoading () {
NProgress.done()
loadingService.close()
}
// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true
// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
baseURL: process.env.VUE_APP_API_BASEURL, // 从环境进程中根据运行环境获取的api的base_url
timeout: 50000 // 请求超时时间
})
let loadingService
/**
* request拦截器
* 发送请求前请求头中设置cookie
*/
service.interceptors.request.use(config => {
NProgress.start()
loadingService = Loading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.1)'
})
let token = store.getters.token
if (token && token.access_token && Date.now() < token.expires_in) {
// 让每个请求携带身份验证信息
if (!config.headers['Authorization']) {
config.headers['Authorization'] = `Bearer ${token.access_token}`
}
}
// 判断如果是get请求增加随机数，防止IE浏览器缓存api请求
if (config.method === 'get') {
if (config.params && Object.keys(config.params).length > 0) {
config.params['cache'] = new Date().getTime()
} else {
config = Object.assign({}, config, { params: { cache: new Date().getTime() } })
}
}
return config
}, error => {
console.error(error)
Promise.reject(error)
})
/**
* respone拦截器
* 通过response自定义code来标示请求状态，处理相应问题
*/
service.interceptors.response.use(
response => {
closeLoading()
const { status }= response.data
// 状态码：-1：未登录 /1：请求成功 /-2：请求失败 /-3：无权限 /-4：系统错误
if (status === 1) {
return response.data.data
} else {
let errorMessage = response.data.message
switch (
case -1:
// 清除本地保存的Token
// 跳转到登录页面
break
case -2:
// 提示错误信息
break
default:
// 提示错误信息
}
return Promise.reject(new Error(errorMessage))
}
},
// 服务端错误
error => {
console.
console.error('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
调用过程
注意：在实例调用中传入的配置会覆盖上一步在构造函数
axios上的配置
import request from '@/XXX/request.js'
/* 用户登录 */
export function loginByUsername (reqParams) {
return request({
// baseURL: '/api',
// headers: { },
url: '/auth/oauth/token',
method: 'post',
params: reqParams
})
}
有其他问题或更好思路，欢迎私信一起讨论。
