vue 对axios进行封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 对axios进行封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

token配置、中英文配置、对所有接口统一设置防抖、对所有post接口统一设置节流

废话少说直接上代码

request.js

import axios from 'axios'
// 使用element-ui Message做消息提醒
import { ElMessage } from 'element-plus'

//这是为了防止刁民反复切换页面，切换页面时对还在请求中的接口进行中断
// const CancelToken = axios.CancelToken;
// import pinia from '../store'
// import { useNet } from '../store/net'
// const net = useNet(pinia)
import routes from '../router/index.js'

//中英文，不使用注释掉，$t('xxx.xxx.xxx')改成你想要的提示
import { translate as $t } from "../language/index"

//创建axios
const instance = axios.create({
    baseURL: process.env.BASE_API,
    timeout: 10000
})
//节流
let lastTime = new Date().getTime()
//防抖
const debounceTokenCancel = new Map()

//请求前拦截
instance.interceptors.request.use(config => {

    const token = localStorage.getItem('token');
    config.headers = {
        //配置token
        'Content-Type': 'application/json',
        'T-Authorization': token,
        //中英文标识，判断当前中英文
        'Accept-Language': localStorage.getItem("language") == null ? 'zh-CN' : localStorage.getItem("language") == 'zh' ? 'zh-CN' : 'en-US'
    }
    //切换页面强行中断请求
    // config.cancelToken = new CancelToken(c => {
    //     net.cancel = c
    // })

    //请求接口进行标识
    const tokenKey = `${config.method}-${config.url}`
    //存在可以防抖的情况，取消请求
    const cancel = debounceTokenCancel.get(tokenKey)
    if (cancel) {
        cancel()
    }

    return new Promise(resolve => {
        let timer
        if (config.method == 'get') {
            //放行get请求
            resolve(config)
        } else if (config.method == 'post') {
            //开始节流
            const nowTime = new Date().getTime()
            if (nowTime - lastTime < 1000) {
                ElMessage.error({
                    showClose: true,
                    message: $t('text.Common.l25'),
                    type: 'error',
                })
                return Promise.reject(new Error('节流处理中，稍后再试'))
            } else {
                //开始防抖
                lastTime = nowTime
                timer = setTimeout(() => {
                    clearTimeout(timer)
                    resolve(config)
                }, 10)
                //发生重复请求，进行取消
                debounceTokenCancel.set(tokenKey, () => {
                    clearTimeout(timer)
                    resolve(new Error('取消请求'))
                })
            }
        }
    })
}, error => {
    console.log(error)
    return Promise.reject(error)
})


// let showError = false; // 新增一个变量来控制是否已经显示错误消息
// let timerError = null; // 新增一个计时器

//响应后拦截
instance.interceptors.response.use(response => {
    if (response.data.code === 0) {
        return response.data.data
    } else {
        //跳转到登陆页面
        if (response.data.code == 402 || response.data.code == 401) {
            routes.push({ path: '/login' })
        }
        ElMessage.error({
            showClose: true,
            message: response.data.msg,
            type: 'error',
        })
        // if (!showError) { // 如果错误消息未显示
        //     ElMessage.error({
        //         showClose: true,
        //         message: response.data.msg,
        //         type: 'error',
        //     })
        //     showError = true; // 设置为已显示
        //     // 设置一个计时器，在一段时间后重置 showError
        //     timerError = setTimeout(() => {
        //         showError = false;
        //         clearTimeout(timerError);
        //     }, 1000); // 1000毫秒后重置
        // }
    }
    //return response
}, error => {
    //其它异常处理
    if (JSON.stringify(error).includes('500')) {
        ElMessage.error({
            showClose: true,
            message: $t('text.Common.l26'),
            type: 'error',
        })
    }
    return Promise.reject(error)
})


export default instance

api.js：

import request from "./request.js";

const baseUrl = '/api'


//post
export function login(params) {
  return request({
    url: baseUrl + "/opsli-boot/system/login",
    method: "post",
    data: params
  });
}

//get
export function findListByTypeCode(params) {
  return request({
    url: baseUrl + "/a123/b456",
    method: "get",
  });
}

使用：

        
import { getKey } from '../../http/api'

getKey().then(res => {
        //在request进行了拦截，如果请求没成功是不返回的，判断成功时一定要判断res !== undefined
            if (res !== undefined) {
                console.log(res)
            }
        }).catch()

文章来源地址https://www.toymoban.com/news/detail-704225.html

到了这里，关于vue 对axios进行封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！