封装axios

ajax.js

'use strict'

import axios from 'axios'
import { Notification } from 'element-ui'

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

// 对请求入参统一处理
ajax.interceptors.request.use(
  function(config) {
    config.data = {
      des: 'data-mark-server',
      src: 'data-mark-front',
      params: config.data
    }
    // 请求头添加token
    const token = window.localStorage.getItem('token')
    if(token) {
      config.headers.Authorization = token
    }
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)

// 对出参统一处理
ajax.interceptors.response.use(
  function(res) {
    const { data, config } = res
    // 无返回数据
    if(!data || !data.code) return Notification({title: '没有返回信息', type: 'error'})
    // token失效, 跳转到登录页
    if(data.code == '-1') return logout()
    // 无调用接口权限
    if(data.code == '-2') return Notification({title: '权限不足, 无接口调用权限', type: 'info'})
    // 对特定url处理
    if(config.url.indexOf('/url/special') > -1) {
      if(data) return data.content
    }
    return data
  },
  function(error) {
    Notification({
      title: '请求错误'+ error,
      type: 'error'
    })
    return Promise.reject((error))
  }
)

const logout = () => {
  window.localStorage.clear()
  window.sessionStorage.clear()
  window.location.replace('/login')
}

api.js引用

import ajax from '../ajax.js'

const baseUrl = 'data/base'


// get请求
 export const getEnv = () => ajax.get(baseUrl+ '/env')
// post请求
export const getList = params => ajax.post(baseUrl+ '/getList', params)
// 特殊处理
export const getDetail = params => ajax.post(baseUrl+ '/getDetail ', params)
.then(res => res.resultData)

写在最后:

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

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