axios请求的封装

说明

常常会遇到新建项目的情况,要不断的复制一些项目配置,记录下axios的请求常用用法

文件夹解构

api  
├──modules          // 存储各个模块调用函数接口  
   ├──staff.js      // 员模块
   ├──post.js       //职位模块
├──index.js         // axios拦截器和，数据封装
├──util.js          //用于存储请求地址

代码实例

拦截器

// api/index.js
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
Vue.prototype.$ajax = axios
const requestMap = new Map()
// http request 拦截器
axios.interceptors.request.use(
  config => {
    // 可在此次拦截数据加密，带token等等
    config.header.token = 'token'
    // 防重复提交
    const keyString = qs.stringify(Object.assign({}, { url: config.url, method: config.method }, config.data, config.params));
    if (requestMap.get(keyString)) {
        // 取消当前请求
        config.cancelToken = new axios.CancelToken((cancel) => {
          cancel('当前处理中');
      })
    }
    requestMap.set(keyString, true);
    Object.assign(config, { _keyString: keyString });

    return config
  },
  err => {
    return Promise.reject(err);
  }
)

// http response 拦截器
axios.interceptors.response.use(
  response => {
    // 重置requestMap
    requestMap.set(response.config._keyString, false)
    // 网络异常
    if (response.status !== 200) {
      console.log('网络异常，请稍后再试')
      return Promise.reject(response) 
    }

    // 可在此次判断接口鉴权失，败未登录，重新登录d等

    return response
  },
  error => {
    console.warn(error)
    // 重置requestMap
    if (error.config && error.config._keyString && requestMap.get(error.config._keyString)) {
      requestMap.set(error.config._keyString, false)
    }
    console.log('请求错误')
    return Promise.reject(error)
})


export default axios

路径

// api/util.js
const hostPrime = 'http://baidu.com'
const url = {
    staff: {
        // 请求员工列表
        list: '/api/staff/list'
    },
    post: {
        // 请求职位列表
        list: '/api/post/list'
    }
}
export default url

函数

// api/modules/staff.js
import axios from '../index.js'
import util from '../util.js'

export const getStafftList = (params) => {
    return axios({ method: 'post', url: util.staff.list, data: params})
}

export const getStafftList = (params) => {
    return axios({ method: 'get', url: util.staff.list, params })
}