vue：如何设计并封装请求拦截器和响应拦截器、实现统一接口管理

---

一、前言

上一篇文章介绍了如何控制“登录”窗口的隐现，如何通过点击“手机登录”、“微信扫码登录”来实现不同页面的切换，以及如何设计手机验证、滑块验证等功能。这一篇文章将会介绍如何设计并封装请求拦截器和响应拦截器、实现统一接口管理。

---

二、步骤

1.请求拦截器的必要性

基于以下几点原因，我们需要设计请求拦截器并封装：
1.不应该将冗长的url直接写在页面的vue文件中；
2.如果某个请求是基于另一个请求成功后才发起的，不断书写.then()会造成回调地狱；
3.登录后需要带上token。
因此，在发送请求前，要将其拦截下来进行检查。

2.统一接口管理

如果后端提供的接口url前半段相同，可以新建文件夹request-request.js，并在其中创建axios实例，实现接口的统一管理。

import axios from "axios"

//创建axios实例（instance）
const instance = axios.create({
  baseURL: "http://kumanxuan1.f3322.net:8881/cms",
  //前半段url
  timeout: 5000
  //如果5s后未响应，就通知用户页面存在加载错误
})

3.封装请求拦截器

在请求进入浏览器组件前，要将其拦截进行处理，下文中对后端返回的数据进行了过滤。

//请求拦截器
instance.interceptors.request.use(config => {
  //什么时候执行这个函数？-发送请求之前
  //cofig是什么？-记录了本次请求相关信息的一个对象
  //这个函数能用来做什么？-做一些请求前可进行的操作（如添加请求头、获取token）
  console.log("执行了请求拦截器", config);
  return config
}, err => {
  return Promise.reject(err)
});

4.封装响应拦截器

//响应拦截器
instance.interceptors.response.use(res => {
  //什么时候执行这个函数？-在接收到后端服务器的相应之后，进入到组件内部的then方法之前执行这里的代码
  //res是什么？-记是axios封装好的一个响应对象
  //这个函数能用来做什么？-做一些统一的数据处理
  console.log("执行响应拦截器", res);
  return res.data//return后的值被组件中的请求的then方法的res接收
}, err => {
  return Promise.reject(err)
});

最后将它们导出：

//导出
export default instance

5.优化统一接口管理

在request中新建api.js，以精品页面的接口为例，代码如下：

import instance from "./request"

export const JingPinAPI = () => instance.get("/products/recommend");

同时，在App.vue中引入：

import {JingPinAPI} from "@/request/api"
...
async created(){
  
let res = await JingPinAPI()
//await后一般加Promise对象
//await new Promise
console.log(res)
}

为了防止每引入一次就造成多个接口的调用，这里将JingPinAPI设计为了一个箭头函数，只有JingPinAPI()时，函数才会调用。

此外，为了解决回调地狱问题，这里使用async&await的书写方式。

---

三、总结

以上就是今天要讲的内容，本文仅仅简单介绍了如何设计并封装请求拦截器和响应拦截器、实现统一接口管理，下一篇文章将继续介绍登录窗口的设计。