vue+axios——创建多个实例共用请求拦截器和响应拦截器（403错误信息不提示bug解决）——基础积累

已于 2023-09-06 17:16:34 修改
阅读量1.9k 收藏
点赞数
分类专栏： axois vue技能提升 第三方API 文章标签： axios axios实例共用请求和拦截器
于 2023-08-31 10:35:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yehaocheng520/article/details/132597392
版权

创建多个实例共用请求拦截器和响应拦截器：使用的是函数的继承，也就是call()方法，这个方法第一个参数就是this,后面的参数可以是一个也可以是多个。最后一定要记得要return出去，否则接口是拿不到数据的。

创建多个实例共用请求拦截器和响应拦截器

axios创建多个实例共用

import axios from 'axios';
import Cookie from 'js-cookie';
const BASE_URL = process.env.VUE_APP_API_BASE_URL;
const BASE_URL_QUOTE = process.env.VUE_APP_API_BASE_URL_QUOTE;

// 跨域认证信息 header 名
const xsrfHeaderName = 'Authorization';

axios.defaults.timeout = 20000;
axios.defaults.withCredentials = false;
axios.defaults.xsrfHeaderName = xsrfHeaderName;
axios.defaults.xsrfCookieName = xsrfHeaderName;
axios.defaults.headers = {'accept-language':'zh-Hans'};
const request= axios.create({
  baseURL: BASE_URL,
});
const requestQuoteCenter= axios.create({
  baseURL: BASE_URL_QUOTE,
});
// http method
const METHOD = {
  GET: 'get',
  POST: 'post',
  PUT: 'put',
  DELETE: 'delete',
};

/**
 * axios请求
 * @param url 请求地址
 * @param method {METHOD} http method
 * @param params 请求参数
 * @returns {Promise<AxiosResponse<T>>}
 */

async function requestQuoteCenter(url, method, params, config) {
  return await request.call(this,requestQuoteCenter, url, method, params, config);
}
async function request(axios,url,method, params, config) {
  switch (method) {
    case METHOD.GET:
      return axios.get(url, { params, ...config });
    case METHOD.POST:
      return axios.post(url, params, config);
    case METHOD.PUT:
      return axios.put(url, params, config);
    case METHOD.DELETE:
      return axios.delete(url, { params, ...config });
    default:
      return axios.get(url, { params, ...config });
  }
}
/**
 * 加载 axios 拦截器
 * @param interceptors
 * @param options
 */
function loadInterceptors(interceptors, options) {
  const { request, response } = interceptors;
  // 加载请求拦截器
  request.forEach((item) => {
    let { onFulfilled, onRejected } = item;
    if (!onFulfilled || typeof onFulfilled !== 'function') {
      onFulfilled = (config) => config;
    }
    if (!onRejected || typeof onRejected !== 'function') {
      onRejected = (error) => Promise.reject(error);
    }
    axios.interceptors.request.use(
      (config) => onFulfilled(config, options),
      (error) => onRejected(error, options)
    );
  });
  // 加载响应拦截器
  response.forEach((item) => {
    let { onFulfilled, onRejected } = item;
    if (!onFulfilled || typeof onFulfilled !== 'function') {
      onFulfilled = (response) => response;
    }
    if (!onRejected || typeof onRejected !== 'function') {
      onRejected = (error) => Promise.reject(error);
    }
    axios.interceptors.response.use(
      (response) => onFulfilled(response, options),
      (error) => onRejected(error, options)
    );
  });
}

export {
  METHOD,
  request,
  loadInterceptors,
  requestQuoteCenter,
};

详细的请求和响应拦截器内容——分请求token认证校验+响应401和403校验

import Cookie from 'js-cookie';
const xsrfHeaderName = import.meta.env.VITE_TOKEN_NAME;
import { removeAuthorization } from '@/utils/request';

// 401拦截
const resp401 = {
  /**
   * 响应数据之前做点什么
   * @param response 响应对象
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {*}
   */
  onFulfilled(response, options) {
    const { message } = options;
    if (response.code === 401) {
      message.error('无此权限');
    }
    return response;
  },
  /**
   * 响应出错时执行
   * @param error 错误对象
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {Promise<never>}
   */
  onRejected(error, options) {
    const { router, message } = options;
    if (error.response && error.response.status == 401) {
      message.error('认证 token 已过期，请重新登录');
      Cookie.remove(xsrfHeaderName);
      removeAuthorization();
      router.push('/login');
      return Promise.reject(error);
    }
    let msg = '';
    if (error.response && error.response.data && error.response.data.error_description) {
      msg = error.response.data.error_description;
    } else if (error.response && error.response.data && error.response.data.error) {
      msg = error.response.data.error.message;
    } else {
      msg = error.message;
    }
    message.error(msg);
    return Promise.reject(error);
  },
};

const resp403 = {
  onFulfilled(response, options) {
    const { message } = options;
    if (response.code === 403) {
      message.error('请求被拒绝');
    }
    return response.data;
  },
  // onRejected(error, options) {
  //   const {message} = options
  //   const {response} = error
  //   if (response.status === 403) {
  //     message.error('请求被拒绝')
  //   }
  //   return Promise.reject(error)
  // }
};

const reqCommon = {
  /**
   * 发送请求之前做些什么
   * @param config axios config
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {*}
   */
  onFulfilled(config, options) {
    const { router, message } = options;
    const { url, xsrfCookieName, headers } = config;
    // if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
    //   message.warning('认证 token 已过期，请重新登录')
    // }
    if (headers.Authorization && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
      message.warning('认证 token 已过期，请重新登录');
    }
    if (!headers.__tenant) {
      config.headers['Authorization'] = Cookie.get(xsrfHeaderName);
    } else {
      delete config.headers.Authorization;
    }
    return config;
  },
  /**
   * 请求出错时做点什么
   * @param error 错误对象
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {Promise<never>}
   */
  onRejected(error, options) {
    const { message } = options;
    let msg = '';
    if (error.response && error.response.data) {
      msg = error.response.data.error;
    } else {
      msg = error.message;
    }
    message.error(msg);
    return Promise.reject(error);
  },
};

export default {
  request: [reqCommon], // 请求拦截
  response: [resp401, resp403], // 响应拦截
};

上面两个文件合并后的处理如下：
在main.js中添加如下内容：

import { loadInterceptors } from '@/utils/request';
import interceptors from '@/utils/axios-interceptors';
loadInterceptors(interceptors, {router, store, i18n, message})

403报错时，错误信息不提示的问题——解决办法

今天发现一个问题，如果是接口报403错误时，通过接口调用的时候，是无法获取到错误信息的。

之前的调用接口的方法就是：

import {request,METHOD} from './request.js';//就是从上面第一个文件导出的参数中获取到request
export function del(id) {
    return request(`/api/app/article/${id}`, METHOD.DELETE)
}

1.403不报错的解决办法（1）——通过async await的方式来处理接口

import {request,METHOD} from './request.js';//就是从上面第一个文件导出的参数中获取到request
export async function del(id) {
    return await request(`/api/app/article/${id}`, METHOD.DELETE)
}

2.403不报错的解决办法（2）——接口请求后的方法async await的处理方法

import {request} from './request.js';//就是从上面第一个文件导出的参数中获取到request
async customRequest(file) {
  let formData = new FormData();
  formData.append('file', file.file);
  let resp = await request(this.baseUrl, 'post', formData);
  //此时，如果接口调用失败，则会抛出错误提示信息，否则会执行下面的代码了
  this.$emit('uploadSucc', resp.Data);
},

下面的内容跟文章相关不大，只是为了凑字数，可忽略！！！

1.Axios简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

axios的github: https://github.com/axios/axios

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。

promise

异步编程的一种解决方案

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果

Promise提供统一的API，各种异步操作都可以用同样的方法进行处理

Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态 (英语意思就是“承诺”，表示其他手段无法改变)

与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。 有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

2.特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

叶浩成520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
axios实例及封装的方法（1）
weixin_44211097的博客
10-25 495
一、axios的实例 为什么要创建axios实例，它与我们直接使用的axios.get这样的写法有什么区别？ 引入axios,然后在页面中进行请求axios.get(‘url’).then(res=>{}),这里默认会导出实例，通常使用这个axios就可以了 而之所以要创建axios实例，是因为我们实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。 比如axios1是用http状态码确定响应是否正
关于vue使用axios post发送json数据跨域请求403的解决方法
热门推荐
春虫虫丶丶丶的博客
08-17 10万+
最近使用vue框架开发项目的时候， 遇到了一个问题，其实这个问题在之前就已经遇到过，不过因为当时没有时间，所以采用了另外一种方法解决。今天再次遇到这个问题，就铁了心解决，在网上找到很多资料，经过尝试都没有能够很好解决，经过自己的一番折腾终于将这个问题解决。 原文已更新，请耐心往下看哦！ 1. 问题 vue开发的时候，使用axios跨域发送请求，同时post发送的数据格式是json格式，发送出...
解决axios跨域请求出错的问题状态码403错误
年华
01-26 6万+
错误信息： Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not
axios 同时多个请求_二次封装axios，根据参数来实现多个请求多次拦截
weixin_34543731的博客
01-31 403
import Vue from 'vue'import axios from 'axios'//取消请求let CancelToken = axios.CancelToken//设置默认请求头，如果不需要可以取消这一步axios.defaults.headers = {'X-Requested-With': 'XMLHttpRequest'}// 请求超时的时间限制axios.defaults.t...
vue+axios实现登录拦截的实例代码
08-30
本篇文章主要介绍了使用 Vue 和 Axios 库来实现登录拦截的实例代码，通过这个项目学习如何实现一个前端项目中所需要的登录、拦截、登出功能，以及利用 Axios 的 HTTP 拦截器拦截请求和响应。 首先，需要生成自己的 ...
vue+axios 拦截器实现统一token的案例
10-14
7. **封装axios**：为了提高代码复用性和统一性，通常会将axios配置和拦截器封装在一个单独的模块中，然后在`main.js`或其他入口文件中导入并配置。这也有助于在项目中添加额外的全局配置，如设置请求超时、全局错误...
Vue+axios 实现http拦截及路由拦截实例
08-30
接下来，我们使用 axios.interceptors.request.use() 方法设置请求拦截器，在这个方法中，我们使用 element ui 的 loading 方法来显示加载动画，并在请求失败时关闭加载动画并显示错误信息。 相似地，我们使用 ...
Vue封装Axios请求和拦截器的步骤
10-14
Vue封装Axios请求和拦截器的目的是为了提高代码的可维护性和复用性，以及提供统一的错误处理机制。以下是对这个主题的详细说明： 首先，我们需要在项目中安装axios。如果使用的是Vue CLI 3，可以通过`npm install ...
vue下axios拦截器token刷新机制的实例代码
11-21
1. **axios拦截器**：axios拦截器允许我们在请求发送前或响应接收后添加额外的操作。在本例中，有两个拦截器，一个用于处理请求（`request.interceptors`），另一个用于处理响应（`response.interceptors`）。 2. *...
axios使用拦截器统一处理所有的http请求的方法
10-17
主要介绍了axios使用拦截器统一处理所有的http请求的方法,通过一段实例代码给大家介绍了axios拦截器使用，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue：Axios前端拦截器
席木木的博客
07-26 3419
限制用户多次点击按钮，频繁地发送同一个请求，影响页面渲染效果，降低前端的无效接口请求操作（其中涉及到Map、Array、Promise的一些基本操作）。
axios拦截器
LLLLLLLLLLe的博客
11-24 9149
axios拦截器
axios拦截器配置最全记录
well2049的博客
12-14 4778
axios 的拦截器配置方式网上已经很多，记录一下，自己总结的最全最好用的配置方式。 顺带记录一下登录鉴权验证token的携带，这里需要用到2个第三方插件库 yarn add history browser-cookies 主要是用来路由重定向和获取浏览器的token 1，一般都是在发送请求之前拿到登录时后台给返回的token，自己手动设置到拦截器里面的axios.interceptors....
vue新建axios实例
qq_34638435的博客
08-08 4488
使用springboot+vue前后端分离，经常会出现跨域调用不同服务的接口，vue处理需要处理跨域的问题外还需要配置多数据源多服务的请求路径。 参考博文：https://www.cnblogs.com/morang/p/8424032.html...
已解决：axios 发送post请求，报403错误
weixin_43826370的博客
05-12 5015
axios 发送post请求，报403错误！！！
【axios练习pending····】axios配置请求拦截器、响应拦截器
weixin_52941842的博客
08-08 571
暂无
axios的实例创建与应用
qq_43750656的博客
01-12 2553
一、使用axios发送Ajax请求 <!--引入axios，就好比引入jquery一样--> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script> //使用axios发送一个简单的http请求 axios.get(url) .then(response => { //ajax请求执
axios移除拦截器
weixin_43743956的博客
01-05 4934
目录结构如下： axios实例有 /** * Axios 实例, ajax请求底层方法 * 官方文档 [https://github.com/axios/axios]{@link https://github.com/axios/axios} * @module utils/axios */ import axios from 'axios' // axios.defaults....
思维进化算法优化BP神经网络——非线性函数拟合.rar
最新发布
07-26
神经网络的matlab案例，本案例介绍如下： 技术深度：案例详细介绍了如何使用MATLAB进行深度学习模型的构建、训练和测试。 实际应用：通过具体的图像识别任务，展示模型的实际应用效果，让你直观感受神经网络的强大能力。 代码解析：提供完整的MATLAB代码，并对关键部分进行详细注释，帮助你理解每一步的工作原理。 优化策略：探讨不同的训练策略和参数调整方法，优化模型性能。
Vue中的请求拦截器和响应拦截器
09-21
在Vue中，请求拦截器和响应拦截器用于在发送请求和接收响应时对数据进行处理。请求拦截器在发送请求之前执行，可以对请求进行预处理，比如添加请求头信息、设置请求超时时间等。而响应拦截器则在接收到响应之后执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶浩成520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值