项目搭建（一）： axios 二次封装

最近打算出一个 vue2.0 & vue3.0 项目搭建细节

封装request 方法思路：

1.相关依赖

 主要的ajax组件，如题这里用的是axios

import axios from 'axios'  

其次分别是提示，vuex（存储），token方法，配置文件

import { Toast } from 'vant'
import store from '../store'
import { getToken, getUser } from './auth'
import Config from '../settings'

token 方法

import Config from '../settings'

export function getToken () {
  return sessionStorage.getItem(Config.TokenKey)
}

export function setToken (token) {
  return sessionStorage.setItem(Config.TokenKey, token)
}

export function removeToken () {
  return sessionStorage.removeItem('token')
}

export function getUser () {
  return JSON.parse(sessionStorage.getItem('user'))
}

export function setUser (user) {
  return sessionStorage.setItem('user', JSON.stringify(user))
}

export function removeUser () {
  return sessionStorage.removeItem('user')
}

剩下的就是创建公共的base_url (.env 文件)，这边以正式环境为例子

ENV = 'production'
# 测试
#VUE_APP_BASE_API  = 'http://wxga.chutianyun.gov.cn:10083/test'
# 正式
#VUE_APP_BASE_API  = 'http://wxga.chutianyun.gov.cn'

2.构建axios 实例 将url和配置的超时时间带入每次请求

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

3.具体封装，导出

// request拦截器
service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['Authorization-ZwWeChat'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
      config.headers.InternetToken = getUser().jftToken // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    config.headers['Content-Type'] = 'application/json'
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 兼容blob下载出错json提示
    if (error.response.data instanceof Blob && error.response.data.type.toLowerCase().indexOf('json') !== -1) {
      const reader = new FileReader()
      reader.readAsText(error.response.data, 'utf-8')
      reader.onload = function () {
        const errorMsg = JSON.parse(reader.result).message
        Toast({
          type: 'fail',
          title: errorMsg,
          duration: 5000
        })
      }
    } else {
      let code = 0
      try {
        code = error.response.data.status
      } catch (e) {
        if (error.toString().indexOf('Error: timeout') !== -1) {
          Toast({
            type: 'fail',
            title: '网络请求超时',
            duration: 5000
          })
          return Promise.reject(error)
        }
      }
      if (code) {
        if (code === 601) {
          store.dispatch('LogOut').then(() => {
            // 用户登录界面提示
            location.reload()
          })
        } else {
          const errorMsg = error.response.data.message
          if (errorMsg !== undefined) {
            Toast({
              type: 'fail',
              title: errorMsg,
              duration: 5000
            })
          }
        }
      } else {
        Toast({
          type: 'fail',
          title: Config.errMessage,
          duration: 5000
        })
      }
    }
    return Promise.reject(error)
  }
)

export default service