Vue axios的封装

可能会有很多初学者或者刚工作的人不知道怎么封装axios，分享一下比较通用的封装

先安装下面几个依赖：

axios，element-ui，qs  

element-ui主要是用他的消息组件，你可以换成别的ui组件

在工具目录utils文件夹新建request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import qs from 'qs'
// import { set } from 'nprogress'
import router from '../router'
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // baseURL: 'http://192.168.31.244:8097', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout 请求超时响应时间
})

// request interceptor
//请求前拦截做处理
service.interceptors.request.use(
  config => {
    //这里做了请求类型的判断 为请求头添加对应的content-type类型
    if (config.type == 'application/x-www-form-urlencoded') {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
      //qs格式化处理 data
      config.data = qs.stringify(config.data)
    } 
    if(config.type == 'application/json') {
      config.headers['Content-Type'] = 'application/json'
    }
    if(config.type == 'multipart/form-data') {
      config.headers['Content-Type'] = 'multipart/form-data'
    }
    
    // do something before request is sent
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
//响应后拦截做处理
service.interceptors.response.use(

  response => {
    const res = response.data
    if(res.code == 401) {
      Message({
        message: res.msg,
        type: 'error',
        duration: 2000
      })
    }
    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，在这里声明后端的接口并调用

post请求如果有不同的请求类型，可以直接改type属性，比如接口要json数据，就改为'application/json'，表单数据就multipart/form-data，或application/x-www-form-urlencoded，注意application/x-www-form-urlencoded在request中已经用qs工具处理数据了，接口函数不需要处理接受的params参数

import request from '@/utils/request'

//get请求类型示例
//获取首页数据
export function getDashboard(params) {
  return request({
    url: '/api/xmbz-desk/dashboard/schedule',
    method: 'get',
    params
  })
}

//post请求示例
//录用
export function employ(params) {
  return request({
	url: '/api/xmbz-market/jobuser/employ/',
	method: 'post',
    type: 'application/x-www-form-urlencoded',
	data: params //不需要qs处理 已经在request处理了
  })
}

请求调用示例

import { employ} from '@/api/api.js'

methods: {
    //
   getData() {
      let data = {...你的数据}
      employ(data).then(res=>{
        if(res.code == 200) {
            //
        }else{
          this.$message.error('获取数据失败！')
        }
      })
    }
}

简单的封装及使用就这样完成了