当前位置 : 主页 > 网络编程 > JavaScript >

axios请求二次封装之避免重复发送请求

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 前言 目的 文件结构 实现 请求拦截 响应拦截 取消重复发送请求 调用 总结 前言 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 axios 是目前最优秀的 HTTP 请求库之
目录
  • 前言
  • 目的
  • 文件结构
  • 实现
    • 请求拦截
    • 响应拦截
    • 取消重复发送请求
  • 调用
    • 总结

      前言

      Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

      axios 是目前最优秀的 HTTP 请求库之一, 我们封装 axios 请求也是为了让代码看的更加清晰, 后期好维护.

      目的

      • 实现请求拦截
      • 实现响应拦截
      • 常见错误处理
      • 不能请求头设置
      • api 集中式管理

      (取消重复请求,重复发送请求, 请求缓存等情况均还未实现)

      文件结构

      实现

      index.js内代码如下:

      引入

      // 引入 axios
      import axios from 'axios';
      // 请求配置单独写一个文件 baseurl.js
      import serverConfig from './baseurl.js'
      

      创建一个实例

      const serviceAxios = axios.creat({
      	baseURL: serverConfig.baseURL, //基础请求地址
          timeout: 1000 , //请求超时设置
          withCredentials: false, // 跨域请求是否需要携带 cookie 
      })
      

      请求拦截

      serviceAxios.interceptors.request.use(
          (config) => {
              console.log("请求配置", config);
              // 是否使用 Token, 
              if(serverConfig.useTokenAuthorization) {
                  config.headers["Authorization"] = localStorage.getItem("token");
              }
              // 设置请求头
              if(config.method === "post") {
                  config.headers["content-type"] = "application/x-ww-form-urlencoded";
                  // config.data = qs.stringify(config.data); //序列化  效果等同于下行代码
                  config.requestType = "form"
              } else {
                  config.headers["content-type"] = "application/json"
              }
              // 返回
              return config
          },
          (error) => {
              Promise.reject(error)
          }
      )
      

      响应拦截

      serviceAxios.interceptors.response.use(
          (res) => {
              console.log("响应拦截", res);
              let data = res.data;
              // 处理自己的业务逻辑,如 token 是否过期...
              return data;
          },
          (error) => {
              let message = ""
              if(error && error.response) {
                  switch (error.response.status) {
                      case 302: 
                          message = "接口重定向了! ";
                          break;
                      case 400:
                          message = "参数不正确! ";
                          break;
                      case 401:
                          message = "您未登录, 或者登录已经超时, 请先登录! "
                          break;
                      case 403:
                          message = "您还没有权限操作! ";
                          break;
                      case 404:
                          message = `请求地址出错: ${error.response.config.url}`;
                          break;
                      case 408:
                          message = "请求超时! ";
                          break;
                      case 409:
                          message = "系统已存在相同数据! "
                          break;
                      case 500:
                          message = "服务器内部错误! "
                          break;
                      case 501:
                          message = "服务未实现! "
                          break;
                      case 502:
                          message = "回答错误! "
                          break;
                      case 503:
                          message = "服务不可用"
                          break;
                      case 504:
                          message = "服务暂时无法访问, 请稍后再试"
                          break;
                      case 505:
                          message = "HTTP 版本不受支持! "
                          break;
                      default:
                          message = "异常问题, 请联系管理员! "
                          break;
                  }
              }
              return Promise.reject(message);
          }
      );
      

      取消重复发送请求

      实现思想

      唯一标识值 : 每次发起请求的时候根据请求的方式,请求URL,请求携带参数设置一个唯一标识值.

      请求队列: 创建一个map对象储存请求的唯一标识值.

      每次发送请求的时候, 在请求拦截中判断请求队列中是否存在这个请求, 存在就说明这个请求正在进行中,那么就取消正在发送的请求,重新发送请求; 不存在就将本次请求加入请求队列中.

      响应拦截中将本次请求从请求队列中移除.

      上一篇:JavaScript Map实现原理与底层结构详解
      下一篇:没有了
      网友评论