Vue-cli4 H5移动端项目封装axios（满足RESTful接口规范）

一、在utils下新建fetch.js

import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 50000                  // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json'
  if (localStorage.getItem('access_token') && config.url.indexOf('/login') < 0) {
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('access_token')
  }
  return config
}, error => {
  Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
  response => {
    if (response.data.code === 401 || response.data.code === 403) {
      // 登出
      store.dispatch('FedLogout').then(() => {
        router.push({path: '/login'})
      })
    }
    return response.data
  },
  error => {
    if (error.isAxiosError) {
      return {
        msg: '网络异常：请检查网络后提交'
      }
    }
    if (error.response) {
      let code = error.response.status
      if ((code === 401 || code === 403)) {
        // 登出
        store.dispatch('FedLogout').then(() => {
          router.push({path: '/login'})
        })
      }
    } else {
      return Promise.reject(error)
    }
  }
)
export default service

二、在src下新建api文件夹，在新建index.js

作用： 转化请求接口的数据（满足RESTful接口规范）

import fetch from '@/utils/fetch'
export default (function request () {
  return function () {
    const args = Array.from(arguments)
    const config = args[0]
    const funcName = args[1]
    const data = args[2]
    if (typeof config[funcName] !== 'object') {
      throw new Error('调用api函数函数错误，请检查函数名称是否错误')
    }
    // 配置axios的config
    var newConfig = JSON.parse(JSON.stringify(config[funcName]))
    if (data) {
      if (config[funcName].method === 'get' || config[funcName].method === 'delete' || config[funcName].method === undefined) {
        newConfig.url = newConfig.url.replace(/\{([\d\w_]+)\}/g, (word, $1) => {
          var res = data[$1]
          // 删除data中的对应字段
          delete data[$1]
          return res
        })
        newConfig.params = data
      } else {
        newConfig.url = newConfig.url.replace(/\{([\d\w_]+)\}/g, (word, $1) => {
          var res = data[$1]
          // 删除data中的对应字段
          delete data[$1]
          return res
        })
        newConfig.data = data
      }
    }
    // 用axios的config发起请求
    return fetch(newConfig)
  }
})()

三、在api下新建apiPath文件夹index.js(存放所有接口地址)

import request from '../index'
const config = {
  // 获取用户菜单
  getAppRouters: {
    url: '/getAppRouters'
  },
  // 新增供应商
  appSupplierAddOrUd: {
    url: '/appSupplier/appSupplierAddOrUd',
    method: 'post'
  }
}
export default function req (funcName, data) {
  return request(config, funcName, data)
}

四、注册到全局（即在main.js文件添加以下两句代码）

import PromiseHttp from '@/api/apiPath/index'
Vue.prototype.$http = PromiseHttp

五、页面使用如下

   // 获取用户菜单  在methods下这样
    async getAppRouters () {
      const res = await this.$http('getAppRouters')
      console.log('获取用户菜单', res)
      // ('getAppRouters')表示apiPath中config定义的接口名
      // 若需要传参则需要这样
      const params={
       id:'',
       name:''
       }
      const res = await this.$http('getAppRouters',params)
      // res即后台返回的数据
    }