Vue非常好用的axios封装拦截器

安装axios

# yarn
yarn add axios
# npm
npm i axios --save

创建目录

一般在/src/assets/目录下创建js目录，新建request.js文件

封装axios拦截器

request.js

import axios from 'axios'
// import { getToken } from '@/assets/js/auth'
// import { removeToken } from './auth'
// import { Message } from 'element-ui'
// import router from '../../router'
// import { Dialog, Toast } from 'vant'
// import store from '@/store'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

const service = axios.create({
    
    
    // baseURL: "http://127.0.0.1:11231",
    baseURL: "http://your.server.host:11231", // url = base url + request url
    timeout: 15000 // request timeout
})

// 请求拦截器
service.interceptors.request.use(
    config => {
    
    
        // 是否需要设置 token
        // if (getToken()) { // 这用的cookies里的？
        //     config.headers['Authorization'] = getToken() // 让每个请求携带自定义token
        // }
        return config
    },
    error => {
    
    
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
    
    
        const res = response.data
        // -1 请求失败  -2 Token失效  可以自己定义错误代码拦截
        if (res.status === -1) {
    
    
            //Toast.fail(res.msg);
            // this.$message.error(res.msg)
            // Message({
    
    
            //   message: res.msg || 'Error',
            //   type: "error"
            // })
            // return Promise.reject(new Error(res.msg || 'Error'))
        } else if (res.status === -2) {
    
    
            //   Dialog.confirm({
    
    
            //     title: '登录验证失效, 请重新登录',
            //     message: '',
            //     confirmButtonText: '重新登陆',
            //     cancelButtonText: '取消'
            //   }).then(() => {
    
    
            //     store.dispatch('Logout').then(() => {
    
    
            //       router.push({
    
    
            //         name: 'login',
            //       })
            //       // location.reload()
            //     })
            //   })
            // removeToken()
            // Message({
    
    
            //   message: "登录验证失效, 请重新登录",
            //   type: "error"
            // })
            // router.push('/login')
            return Promise.reject(new Error(res.msg || 'Error'))
        } else {
    
    
            return res
        }
    },
    error => {
    
    
        return Promise.reject(error)
    }
)

const api = {
    
    
    getXXX: (data) => service({
    
    
        url: '/api/v2/XXXXXX',
        method: 'get',
        params: data
    }),
    setXXX: (data) => service({
    
    
        url: '/api/v2/XXXXXX',
        method: 'post',
        data
    }),
}

export default api

注释的部分为项目中实用的一些功能，有elementui的提示框，有vant的Toast等。还有用js-cookie的Token认证，选择打开注释就可以了

api使用

main.js 里全局引用

import api from './assets/js/request'
Vue.prototype.$api = api

xxx.vue里调用API

GET

async OnXxxxxxx() {
    
    
	  let res = await this.$api.getXXX({
    
     // 有参数
	        sn: this.sn,
	        num: this.num,
	      })
      let res = await this.$api.getXXX() //无参数
      // console.log(res)
      if (res.status == 1) {
    
    
      	//...
      } else {
    
    
        Toast(res.msg)
      }
},

POST

async Commit() {
    
    
      let res = await this.$api.setXXX({
    
    
        type: this.type,  //Post的参数
        priority: this.priority,
        title: this.title,
        message: this.message,
        contact: this.contact,
      })
      // console.log(res)
      if (res.status == 1) {
    
    
        //...
      }
},