axios的请求拦截和响应拦截

1.安装axios

npm install axios --save

2.引入模块

在untils文件夹中创建request.js文件，引入axios模块

import axios from "axios";

3.创建axios实例

// 引入axios
import axios from 'axios'
// 引入提示消息组件
import { Message } from 'element-ui'
const _axios = axios.create({baseURL: process.env.VUE_APP_BASE_API
})

axios封装的好处：

1、方便后期代码的维护，

2、减少代码量，减少不必要的重复请求响应，

3、通过配合async await，让代码更加优雅

把在vue中如何将axios进行封装给说了一下；

并且把请求拦截和响应拦截，以及请求头携带token给说了一下，老大讲的也是很细致，中间的话，是因为拦截那块token处理的有点的问题，导致只要以获取到数据列表token值就变为undefined，然后讲过一步步的分析，找到了问题，最后也是解决了，这样的话也对我们也是有提升的，让我们知道下次遇到这种情况时候知道怎么处理了

axios的封装处理

import axios from 'axios'
import { Message } from 'element-ui' // Message===this.$message
import Store from '@/store'
import Router from '@/router' // Router===this.$router
const _axios = axios.create({baseURL: process.env.VUE_APP_BASE_API
})
// 请求拦截
_axios.interceptors.request.use((config) => {if (Store.state.user.token) {config.headers.Authorization = `Bearer ${Store.state.user.token}`}return config},(error) => {/*new Promise((resolve,reject)=>{reject('错误')})等效于Promise.reject('错误')*/return Promise.reject(error)}
)
// 响应拦截
_axios.interceptors.response.use((res) => {if (res.data.success) {// 成功处理return res.data} else {// 失败处理// 提示错误信息Message.error(res.data.message)// 让接口调用执行.catch,中止.then的执行return Promise.reject(res.data.message)}},(error) => {// console.dir(error)if (error.response && error.response.status === 401) {// 清除token：vuex中清除// Store.commit('user/setToken', '')// 清除用户信息：vuex中清除// Store.commit('user/setUserInfo', '')Store.commit('user/logout')// 提示错误信息Message.error(error.response.data.message)// 跳转到登录页// this.$routerRouter.push('/login?redirect=' + window.location.href.split('#')[1])}return Promise.reject(error)}
)
export default _axios

axios的请求拦截和响应拦截相关推荐

axios 最全请求拦截器响应拦截器配置公共请求头超时时间以及get delete post put 四种请求传参方式
axios 拦截器请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操 ...
axios 请求拦截器响应拦截器
一. 拦截器介绍一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
axios请求拦截和响应拦截
在我们平常调用接口的时候,会使用到拦截器这个工具,大致有两种用法,请求拦截和响应拦截. 请求拦截 axios.interceptors.request.use((config)=>{return ...
axios拦截器（请求拦截和响应拦截）
axios拦截器分为request请求拦截器和response响应拦截器. request请求拦截器:发送请求前统一处理,如:设置请求头headers等. response响应拦截器:有时候我们要根据 ...
vue中axios请求拦截、响应拦截的配置
1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins,然后在 plugins/ 下新建 axios.js 文件,写入如下代码 import axios from 'axios' im ...
vue请求拦截器响应拦截器
import axios from "axios"; // 创建一个axios的appconst request = axios.create({baseURL:'http://1 ...
axios拦截器_请求拦截器_响应拦截器---axios工作笔记010
然后我们再去看看axios的,请求拦截器,和响应拦截器. 先说一下这个,拦截器的原理,其实就是我们发送一个请求,这个请求在发出去之前,我们的请求拦截器,先去拦截一下,拦截的时候可以对请求数据做一些处 ...
axios的响应拦截器
一.拦截器介绍: 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器请求拦截器: 在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
vue3.0 请求拦截对Token处理,导航守卫判断是否登录,响应拦截,觖析token存储到vuex中
需求:用户点击登录的时候获取token存取下来,然后放入请求拦截,因为用户上拉刷新下拉加载的时候需要用到;不然用户一刷新,服务端都不知道用户是谁了目录请求存储token: 请求拦截,及请求错误的响 ...

axios的请求拦截和响应拦截

axios封装的好处：

axios的封装处理

axios的请求拦截和响应拦截相关推荐

最新文章

热门文章