前言
前端常用的请求方式有:ajax、fetch、axios,在vue项目中数据交互通常会选择使用axios,它是基于promise的http库,可以运行在浏览器端和node端。
它可以配置请求超时时间、取消请求、拦截请求和响应、转换json、客户端防御csrf(跨站请求伪造)等功能。
1、安装
npm install axios;
2、封装步骤
将axios封装到一个独立的文件中,在src/utils文件夹创建request.js文件 以下封装为项目中的配置,涉及一些具体的业务可以忽略:
//引入axios
import axios from 'axios'
//弹框的msg
import { Message } from 'element-ui'
//vuex-store中存储的信息
import store from '@/store'
//单独封装的获取token
import { getToken } from '@/utils/common/auth'
//单独封装的响应码
import constants from '@/utils/common/constants'
// 创建一个axios
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url,环境配置在代理中
timeout: 120000 // 请求超时时间
})
// request interceptor请求拦截器
service.interceptors.request.use(
config => {
// 这部分和业务相关,可以自行配置
// 获取token
if (store.getters.token) {
config.headers['CGI_TOKEN'] = getToken()
}
// 获取配置,蓝绿标识
if (store.getters.config) {
config.headers['cluster-env'] = store.getters.config.clusterEnv
}
return config
},
error => {
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor响应拦截器
service.interceptors.response.use(
response => { // 成功请求到数据
const res = response.data
//以下的处理为业务相关的验证码校验、登录超时、权限认证类的处理
switch (res.code) {
case constants.SUCCESS_CODE:
return res
case constants.VALID_OPEN:
// 验证码
return res
case constants.LOGIN_FAIL:
// 验证码刷新
return res
case constants.TOKEN_EXPIRED:
store.dispatch('user/logout')
return Promise.reject(res.message || '超时请重新登录!')
case constants.SESSION_TIMEOUT:
store.dispatch('user/logout')
return Promise.reject(res.message || '超时请重新登录!')
case constants.AUTH_FAILED:
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(res.message || '权限认证失败!')
default:
Message({
message: res.message || '系统开小差, 请稍候重试!',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(res.message || '系统开小差, 请稍候重试!')
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
ps:附上响应码的配置文件constants.js
const SUCCESS_CODE = '000000'
const FAILURE_CODE = '999999'
const AUTH_FAILED = '410001'
const TOKEN_EXPIRED = '410003'
const PARAMETER_NULL = '431001'
const VALIDATE_ERROR = '431003'
const LOGIN_FAIL = '432003'
const DATA_NOT_EXIST = '432005'
const SESSION_TIMEOUT = '432006'
const VALID_OPEN = '433001'
const GET_VALID_FAIL = '433003'
const REQUEST_ID_NULL = '539007'
const PAGE_404 = 'Page404'
export default {
SUCCESS_CODE,
FAILURE_CODE,
AUTH_FAILED,
TOKEN_EXPIRED,
PARAMETER_NULL,
VALIDATE_ERROR,
LOGIN_FAIL,
DATA_NOT_EXIST,
SESSION_TIMEOUT,
VALID_OPEN,
GET_VALID_FAIL,
REQUEST_ID_NULL,
PAGE_404
}
3、如何使用呢?
1、先在src下新建文件夹api,再对应模块的新建某个页面的请求接口文件比如demo.js
//引入request
import request from '@/utils/request'
// 写一个登录接口的请求
export function login(data) {
return request({
url: '/cgiaccount/login',
method: 'post',
data
})
}
2、vue页面使用接口
const param = {
name: this.name,
code: this.code,
}
//调用接口传参取值
login(param).then(res => {
this.status = res.data.status
}).catch(res => {
//
})
以上基本就完成了axios的二次封装,大家可以根据自己的不同业务场景来优化,小白做笔记,欢迎指正!