vue使用axios创建请求拦截、响应拦截器

最新推荐文章于 2025-04-11 15:04:10 发布

凑热闹的

最新推荐文章于 2025-04-11 15:04:10 发布

阅读量564

点赞数

分类专栏： vue项目搭建 vue.js vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45852123/article/details/120325883

版权

本文介绍如何在Vue项目中利用axios库，创建请求和响应的拦截器，集中在utils文件夹下的request.js文件中进行配置，用于统一处理请求前后的逻辑和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 安装axios
1.npm install axios --save
2.npm install qs.js --save　　//它的作用是能把json格式的直接转成data所需的格式

二在utils文件下编写规则
2.1 新建request.js

import Vue from 'vue'
import axios from 'axios'
// import { debounce, tokenName } from '@/config/settings'
const baseURL =
  process.env.NODE_ENV === 'development'
    ? '/nursingQuality-dev'
    : '/nursingQuality-test'
//配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
const contentType = 'application/json;charset=UTF-8'
//登录失效code
const invalidCode = 402
//无权限code
const noPermissionCode = 401
//最长请求时间
const requestTimeout = 5000
//是否开启登录拦截
const loginInterception = true
//操作正常code，支持String、Array、int多种类型
const successCode = [1]
import store from '@/store'
import qs from 'qs'
im