axios 拦截器及其实现过程

最新推荐文章于 2024-03-25 21:45:03 发布

城南花开ze

最新推荐文章于 2024-03-25 21:45:03 发布

阅读量975

点赞数 1

分类专栏： Javascript 文章标签： axios 拦截器、实现过程

本文链接：https://blog.csdn.net/weixin_42614080/article/details/119081365

版权

Javascript 专栏收录该内容

111 篇文章 17 订阅

订阅专栏

一、axios 拦截器

axios 拦截器，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios 拦截器</title>
  <script src="./node_modules/axios/dist/mine-axios.js"></script>
</head>
<body>
  <script>
    console.dir(axios);
    // 设置请求拦截器  config 配置对象
    axios.interceptors.request.use(function one(config) {
      console.log('请求拦截器成功 1');
      return config;
    }, function (error) {
      console.log('请求拦截器失败 1');
      return Promise.reject(error);
    });

    axios.interceptors.request.use(function two(config) {
      console.log('请求拦截器成功 2');
      return config;
    }, function (error) {
      console.log('请求拦截器失败 2');
      return Promise.reject(error);
    });

    // 设置响应拦截器
    axios.interceptors.response.use(function (response) {
      console.log('响应拦截器成功 1');
      return response;
    }, function (error) {
      console.log('响应拦截器失败 1');
      return Promise.reject(error);
    });

    axios.interceptors.response.use(function (response) {
      console.log('响应拦截器成功 2');
      return response;
    }, function (error) {
      console.log('响应拦截器失败 2');
      return Promise.reject(error);
    });

    // 发送请求
    axios({
      method: 'GET',
      url: 'http://localhost:3000/posts'
    }).then(response => {
      console.log(response);
    });
  </script>
</body>
</html>

二、axios 拦截器的实现过程

axios 拦截器的实现过程，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios 拦截器实现</title>
  <!-- <script src="./node_modules/axios/dist/mine-axios.js"></script> -->
</head>
<body>
  <script>
    // 构造函数
    function Axios (config) {
      this.axios = config;
      this.interceptors = {
        request: new InterceptorManager(),
        response: new InterceptorManager(),
      }
    }

    // 发送请求
    Axios.prototype.request = function (config) {
      // 创建一个 promise 对象
      let promise = Promise.resolve(config);
      // 创建一个数组
      const chains = [dispatchRequest, undefined];
      // 处理拦截器
      // 请求拦截器 将请求拦截器的回调 压入到 chains 的前面  request.handles = []
      this.interceptors.request.handlers.forEach(item => {
        chains.unshift(item.fulfilled, item.rejected);
      });

      // 响应拦截器
      this.interceptors.response.handlers.forEach(item => {
        chains.push(item.fulfilled, item.rejected);
      });

      // console.log(chains);

      // 遍历
      while (chains.length > 0) {
        promise = promise.then(chains.shift(), chains.shift());
      }

      return promise;
    }

    // 发送请求
    function dispatchRequest (config) {
      // 返回一个 promise 队列
      return new Promise((resolve, reject) => {
        resolve({
          status: 200,
          statusText: 'OK'
        });
      });
    }

    // 创建实例
    let context = new Axios({});
    // 创建 axios 函数
    let axios = Axios.prototype.request.bind(context);
    //将 context 属性 config interceptors 添加至 axios 函数对象身上
    Object.keys(context).forEach(key => {
      axios[key] = context[key];
    });

    // 拦截器管理器构造函数
    function InterceptorManager () {
      this.handlers = [];
    }

    InterceptorManager.prototype.use = function (fulfilled, rejected) {
      this.handlers.push({
        fulfilled,
        rejected
      })
    }

    //以下为功能测试代码
    // 设置请求拦截器  config 配置对象
    axios.interceptors.request.use(function one(config) {
      console.log('请求拦截器成功 1');
      return config;
    }, function (error) {
      console.log('请求拦截器失败 1');
      return Promise.reject(error);
    });

    axios.interceptors.request.use(function two(config) {
      console.log('请求拦截器成功 2');
      return config;
    }, function (error) {
      console.log('请求拦截器失败 2');
      return Promise.reject(error);
    });

    // 设置响应拦截器
    axios.interceptors.response.use(function (response) {
      console.log('响应拦截器成功 1');
      return response;
    }, function (error) {
      console.log('响应拦截器失败 1');
      return Promise.reject(error);
    });

    axios.interceptors.response.use(function (response) {
      console.log('响应拦截器成功 2');
      return response;
    }, function (error) {
      console.log('响应拦截器失败 2');
      return Promise.reject(error);
    });

    // 发送请求
    axios({
      method: 'GET',
      url: 'http://localhost:3000/posts'
    }).then(response => {
      console.log(response);
    });
  
  </script>
</body>
</html>

城南花开ze

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
axios 拦截器及其实现过程

一、axios 拦截器axios 拦截器，代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫