axios拦截器应用场景

一：什么是axios拦截器、为什么要使用axios拦截器？

在vue项目中，我们通常使用axios与后台进行数据交互，axios是一款基于promise封装的库，可以运行在浏览器端和node环境中。它有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以vue官方开发组放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。

页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；例如每个请求都附带后端返回的token，拿到response之前loading动画的展示等。如果请求数非常多，这样处理起来会非常的麻烦，程序的优雅性也会大打折扣。在这种情况下，axios为开发者提供了这样一个API：拦截器。拦截器分为请求（request）拦截器和响应（response）拦截器。

二：为axios配置拦截器

1.axios的基础配置

项目目录如下图所示：

其中，api一般存放的为页面的请求，这些请求都需要统一经过请求拦截器的处理，这部分不是重点，随便拿出一个文件来进行展示，一看就能懂

重点在于request文件的编写，以下是axios进行基础配置的部分代码

//   在http.js中引入axios
import axios from 'axios'   //引入 axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，某些请求会用得到
import { Message } from 'element-ui'    //引入 element-ui 的 Message 模块，用于信息提示
import store from '@/store'     //引入 vuex 中的数据
import { getToken } from '@/utils/auth'   //引入拿到的权限tocken// create an axios instance   创建axios实例
const service = axios.create({baseURL: process.env.BASE_API, // api 的 base_urltimeout: 5000， // request timeout  设置请求超时时间responseType: "json",withCredentials: true, // 是否允许带cookie这些headers: {"Content-Type": "application/json;charset=utf-8"}
})

2.axios请求拦截器

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

// create an axios instance
service.interceptors.request.use(config => {// 在发送请求之前做什么if(config.method === "post") {// 序列化// config.data = qs.stringify(config.data);// config.data = JSON.stringify(config.data);// 温馨提示,若公司的提交能直接接受json 格式,可以不用 qs 来序列化的} else {if (store.getters.token) {// 若是有做鉴权token , 就给头部带上token// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改// 若是需要跨站点,存放到 cookie 会好一点,限制也没那么多,有些浏览环境限制了 localstorage (隐身模式)的使用config.headers['X-Token'] = getToken()}}return config;},error => {// 对请求错误做些什么，自己定义// 使用element-ui的message进行信息提示Message({                  showClose: true,message: error,type: "warning"});return Promise.reject(error);}
}

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候，会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，服务器就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。

3.响应拦截器

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页等。

// response interceptor
service.interceptors.response.use(response => {// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据// 否则的话抛出错误if (response.status === 200) {return Promise.resolve(response);} else {return Promise.reject(response);}},// 服务器状态码不是2开头的的情况// 这里可以跟你们的后台开发人员协商好统一的错误状态码// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等// 下面列举几个常见的操作，其他需求可自行扩展error => {if(error.response.status) {switch(error.response.status) {// 401: 未登录// 未登录则跳转登录页面，并携带当前页面的路径// 在登录成功后返回当前页面，这一步需要在登录页操作。case 401:router.replace({path: '/login',query: {redirect: router.currentRoute.fullPath}});break;// 403 token过期// 登录过期对用户进行提示// 清除本地token和清空vuex中token对象// 跳转登录页面case 403:Message({message: '登录过期，请重新登录',duration: 1000,forbidClick: true});// 清除tokenlocalStorage.removeItem('token');store.commit('loginSuccess', null);// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面setTimeout(() => {router.replace({path: '/login',query: {redirect: router.currentRoute.fullPath}});}, 1000);break;// 404请求不存在case 404:Message({message: '网络请求不存在',duration: 1500,forbidClick: true});break;// 其他错误，直接抛出错误提示default:Message({message: error.response.data.message,duration: 1500,forbidClick: true});}return Promise.reject(error.response);}}
});

响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。例如：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。

4.在项目中调用拦截器

axios封装好之后，调用就很简单了。我们把接口统一写在api文件夹中。（如果你的业务非常复杂，建议把不同模块或组件的请求分开写到不同的文件里，这样方便维护）。

//   api.js
import request from '@/utils/request'export function userSearch(name) {return request({url: '/search/user',method: 'get',params: { name }})
}然后在具体的组件中进行调用即可import { userSearch } from '@/api/api'
export default {data() {return {name: 'Ealen'}},methods:{getUserInfo() {userSearch(this.name).then(res => {//对拿到的res.data进行一番操作或者渲染})}},mounted() {this.getUserInfo();}
}

axios拦截器应用场景相关推荐

什么是axios拦截器？有哪些作用和使用场景
axios拦截器拦截器介绍一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置 ...
axios拦截器_78.1K 的 Axios 项目有哪些值得借鉴的地方
Axios 是一个基于 Promise 的 HTTP 客户端,同时支持浏览器和 Node.js 环境.它是一个优秀的 HTTP 客户端,被广泛地应用在大量的 Web 项目中. 由上图可知,Axios ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装 1
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
axios拦截器 config_axios拦截器
页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者提供了这样一个API: ...
全局配置axios、axios 拦截器和 proxy 跨域代理
目录一.全局配置axios 1. 为什么要全局配置 axios 2. 如何全局配置 axios 3. 在 vue3 的项目中全局配置axios 4. 在 vue2 的项目中全局配置 axios ...
axios拦截器设置及其实现原理剖析
axios使用说明文档 axios拦截器设置应用场景请求拦截器用于在接口请求之前做的处理,比如为每个请求带上相应的参数(token,时间戳等). 返回拦截器用于在接口返回之后做的处理,比如对返回的 ...
token和axios拦截器
Token实现JWT身份认证 1.1-Token介绍 1.为什么要有token? 默认情况下,HTTP是一个无状态协议,也就是说任何浏览器都可以访问服务器,但是服务器并不能知道浏览器到底是属于哪个用户 ...
使用 axios 拦截器解决「前端并发冲突」问题
点击上方"小生方勤",选择"设为星标" 第一时间关注技术干货! 背景并发冲突问题, 是日常开发中一个比较常见的问题. 不同用户在较短时间间隔内变更数据,或者某 ...

axios拦截器应用场景

axios拦截器应用场景相关推荐

最新文章

热门文章