封装axios(2)

154 阅读1分钟
'use strict'

import Vue from 'vue'
import axios from 'axios'
// import { getEnv } from '@/util/util'
import {getTime, getUid} from "@/unit/fn";
import {MessageBox} from "element-ui";

const ajax = axios.create({
  timeout: 8000,
  transformResponse: [transformResponse],
  // headers: {
  //   'Content-Type': 'application/json',
  //   'X-Requested-With': 'XMLHttpRequest'
  // },
  responseType: 'json'
});


function transformResponse(res) {
  const data = JSON.parse(res)
  if (!data) {
    Vue.prototype.$message.error('没有返回信息')
    // throw new Error('接口返回错误')
    return
  }
  if ((data.code && data.code === "0") || data.success) {
    return data
  } else {
    if (data.data.code === 401) {
      return logout()
    }
    Vue.prototype.$message.error(data.msg)
    throw new Error('接口返回错误')
  }
}

ajax.interceptors.request.use(
  function(config) {
    // 这里可以对请求数据统一处理
    if (config.url.indexOf('/dms/api/v1') > -1) {
      config.data = {
        des: 'data-mark-server',
        src: 'data-mark-front',
        param: config.data,
        time: getTime(),
        msgId: getUid(16),
      }
    }
    // 请求头添加token
    if (window.localStorage.getItem('token')) {
      config.headers.Authorization = window.localStorage.getItem('token')
    }
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)

ajax.interceptors.response.use(
  function(res) {
    // 这里可以对返回数据做统一处理
    if(res.config.url.indexOf('/dms/api/v1') > -1) {
      if (res.data.statusCode === 200) {
        return res.data.content
      } else {
        MessageBox.alert(res.data.statusDetail.errorMsg.join(', '), '提示', {showClose: false})
        return Promise.reject(res.data.statusCode)
      }
    }
    return res.data
  },
  function(error) {
    return Promise.reject(error)
  }
)

const logout = () => {
  // const env = getEnv()
  window.localStorage.clear()
  window.location.replace('/extraction')
}

export default ajax

写在最后: 

1. 运用了transformResponse后, 记得用JSON.parse(res)转换为对象

2. 接口返回数据的执行顺序:
1. transformResponse   2. interceptors.response.use