[JavaScript知识库] Vue非常好用的axios封装拦截器

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue非常好用的axios封装拦截器 -> 正文阅读

[JavaScript知识库]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) {
        //...
      }
},