axios请求封装（直接用）

比较常见的一种封装方式，方便以后开发，直接copy。

拦截器(request.js)：

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// import { encrypt,decrypt } from './crypto' //加密解密用

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 10000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    // config.data=encrypt(JSON.stringify(config.data),'key1','key2')
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    // var res=[]
    // if(typeof(response.data)==='string'){
    //   res = decrypt(response.data,'key1','key2')
    // }else{
    //   res=JSON.parse(response.data)
    // }
    // console.log('-----response------')
    // console.dir(res)

    const res=response.data
    if (res instanceof Blob) {
      return response
    }
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('登录过期，您可以取消留在此页面，或重新登入', {
          confirmButtonText: '登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

API接口(api.js)：

import request from '@/utils/request'

//-------------------------1----------------------------
export function login(data) {
  return request({
    url: '/admin/base/user/login',
    method: 'post',
    params: data
  })
}
//--------------------------2--------------------------
const common = {
  upload(data) {
    return request({
      headers: { 'Content-Type': false },
      url: '/api/common/upload_image',
      method: 'post',
      data

    })
  },
  uploadFile(formData,filename) {
    return request({
      headers: { 'Content-Type': false },
      url: '/api/common/postFile',
      method: 'post',
      params:{fileName:filename},
      data:formData
    })
  },
  downloadFile(data) {
    return request({
      headers: { 'Content-Type': false },
      url: '/api/common/download',
      method: 'post',
      data
    })
  },
}
export default common
//-------------------------3----------------------------
export const webApi = {
  webList(data) {
    return request({
      url: ' ',
      method: 'post',
      data
    })
  },
  webPageList(query) {
    return request({
      url: ' ',
      method: 'post',
      params: { current: query.page, size: query.size },
      data: query.filterForm
    })
  },
  webSave(data) {
    return request({
      url: ' /save',
      method: 'post',
      data
    })
  },
  webDelete(id) {
    return request({
      url: ' /delete',
      method: 'post',
      params: { id: id }
    })
  }
}