axios二次封装

161 阅读2分钟

前言

前端常用的请求方式有: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,环境配置在代理中
  timeout120000 // 请求超时时间
})

// 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',
          duration5 * 1000
        })
        return Promise.reject(res.message || '权限认证失败!')

      default:
        Message({
          message: res.message || '系统开小差, 请稍候重试!',
          type'error',
          duration5 * 1000
        })
        return Promise.reject(res.message || '系统开小差, 请稍候重试!')
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type'error',
      duration5 * 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的二次封装,大家可以根据自己的不同业务场景来优化,小白做笔记,欢迎指正!