首页 > 其他分享 >axios请求拦截器和响应拦截器

axios请求拦截器和响应拦截器

时间:2022-10-26 11:35:30浏览次数:52  
标签:axios return res 响应 拦截器 error data

import axios from 'axios';

const service = axios.create({
  baseURL: 'http:// test.com/api/',
  headers: { 'X-Requested-With': 'XMLHttpRequest' },
  withCredentials: true,
  timeout: 10000,
});

service.interceptors.request.use(
  config => {
    config.headers.Authorization = localStorage.getItem('Token');
    return config;
  },
  error => {
    return Promise.reject(error);
  },
);

service.interceptors.response.use(
  res => {
    if (!res.headers['content-type']?.includes('application/json')) {
      // 非JSON类型,返回原始数据自行处理
      return res;
    }
    const { data } = res.data;
    if (!data) {
      throw new Error('请求繁忙,请稍候再试~');
    }
    return res.data;
  },
  error => {
    return Promise.reject(error);
  },
);

在main.js中引入,axios按需配置

标签:axios,return,res,响应,拦截器,error,data
From: https://www.cnblogs.com/hwinter/p/16827643.html

相关文章

  • 图像响应式学习记录
    看到阮一峰老师的响应式图片教程,这里就不粘贴代码方面的示例了,因为阮一峰老师里的示例都讲得很清楚,具体内容参考以下链接响应式图像教程......
  • vue项目中使用axios获取本地json文件,报404错(已解决✔)
    vue项目中VueX的组件store里面有个actions的axiosget请求,请求本地的JSON文件的时候就报错404了。看了好久资料最终解决了。虽然刚开始的时候我已近把静态资源放在了pub......
  • Vue笔记20 网络封装axios、模拟httpbin.org
                 ......
  • SpringBoot(五)SpringBoot拦截器
    1.继承HandlerInterceptorAdapter,实现preHandle前置处理器,returntrue则进行后续处理,实现postHandle,afterCompletion后置处理。2.实现WebMvcConfigurer,SpringBoot2......
  • 拦截器
    Filter过滤器和拦截器的区别:Filter属于servlet技术,拦截器属于springMVCFilter对所有访问进行增强,拦截器只适用于springMVC    ......
  • 信号的分解及其响应总论
    信号的分解及其响应总论1概述线性时不变系统的响应分析求解过程主要来自三个方面1基本信号的基本响应2任何信号分解成一般信号的线性组合3基本信号线性组合的响......
  • drf视图中调用的请求和响应类
    drf视图中调用的请求和响应类8.1request如果使用视图的时候使用的是drf中的视图(如:APIView),而不是django的视图(View),那么视图中调用的请求对象request不再是原来的req......
  • http响应Last-Modified和ETag以及asp.net web api实现
    基础知识1)什么是”Last-Modified”?在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标........
  • 浅谈响应式更新在输入输出处理中的应用
    简介前端的一大重点是处理输入和输出,而vue的响应式系统给输入与输出的维护带来极大便利。将命令式操作转为响应式更新,我们不再需要为代码中充斥着大量手动的数据更新过......
  • Vue中父组件向子组件传值无法响应props的变化
    父组件:<template><q-btnroundcolor="pink-4"size="0.9em"text-color="white"denseic......