JavaScript封装axios的实现详解

更新时间：2022年09月01日 15:39:19 作者：搞前端的小菜

这篇文章主要介绍了JavaScript封装axios的实现，Axios是一个开放源代码库，使我们可以轻松地发出HTTP请求。实际上，它是通过额外的超能力来fetch

摘要

在vue中，我们调用接口使用的都是axios，使用之前我们也会进行一定的封装，然后再进行使用。

在这里，我们主要说一下axios的实现原理，以及如何使用原生的js来自己封装出一个axios。

这里实现出几个主要的方法，包括post请求方法，create配置方法，以及拦截器的方法。

1.post方法

在我们写方法之前，肯定是要先自己写一个类出来，里面的内容先不用写。

然后再在类的下面写出post的方法：

function iaxios () {
}
iaxios.prototype.post = function (url, data){
}

OK，现在我们来实现这个方法。

如果我们想用原生的js来实现post请求，我们应该这样做：

    var xhr = new XMLHttpRequest();
    xhr.open('post', url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status == 200 || xhr.status == 304)) {
          resolve(xhr.responseText)
        } else {
          reject(xhr.responseText)
        }
      }
    };
    xhr.send(data)

但是我们直接把这段代码放进去的话，会有一点问题：

1.官方的axios返回的是一个promise对象

2.官方的axios.post方法传的data参数是一个对象，原生的是一个字符串

所以为了解决第一个问题，我们可以在方法内返回一个promise对象，而第二个问题可以使用JSON.stringfy()这个方法解决。

iaxios.prototype.post = function (url, data) {
  //返回promise对象
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open('post', url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status == 200 || xhr.status == 304)) {
          resolve(xhr.responseText)
        } else {
          reject(xhr.responseText)
        }
      }
    };
    xhr.send(JSON.stringify(data))
  })
}

这样我们就实现了post的这个方法了。

而对get方法这里就不再写一遍了（写的时候主要注意参数的问题就可以了）。

2.create方法

首先我们知道，axios的create方法主要是对请求头等参数的配置，而这个方法同样也会返回一个axios的实例，这个实例可以继续使用post等方法。

所以我们首先想到的是，这个方法应该返回一个实例对象，而这个实例对象下的属性会根据传进来的对象设置。

这里面我只列举两个属性：

iaxios.prototype.create = function (obj) {
  var emaxios = new iaxios()
  emaxios.headers = obj.headers;
  emaxios.baseUrl = obj.baseUrl;
  return emaxios;
}

但是我们调用完这个create方法后，我们已经有了一些配置，如果再调用post等方法，我们应该是携带着这些参数去调用psot方法，所以在post方法内我们也要修改一下。

我们首先写一个配置请求头的方法：

function setHeader (xhr, headers) {
  for (var i in headers) {
    xhr.setRequestHeader(i, headers[i]);
  }
}

然后在post方法内，在ajax请求发送之前调用这个方法就可以了：

    setHeader(xhr, this.headers);

3.拦截器

在axios中，拦截器分两种，分别是请求拦截和响应拦截。

二者的作用也是相差不多的，一个是希望在请求之前做什么，一个是希望在请求之后做什么。

我们先来写一下请求拦截（这里面不考虑use）：

我们先想一下，interceptors一定是一个对象，并且下面有两个属性，分别是request和response。

那么我们就在类里面写一下：

function iaxios () {
  this.interceptors = {
    request (cb) {
    },
    response (aa) {
    },
  }
}

如果我们想在外边调用这个方法，会将一个回调函数传进来，

所以在我们这里我们需要把这个回调函数保存下来（考虑到有多个拦截器，所以我们采用数组保存）。

同时我们也要写一个data用于存放请求时的数据（因为在请求拦截器的回调函数中，有一个config参数，它包含着请求的数据）

function iaxios () {
  //保存拦截器中的回调函数
  this.saveRequest = []
  this.saveResponse = []
  //保存请求的数据
  this.data = {};
  let _this = this;
  this.interceptors = {
    request (cb) {
      _this.saveRequest.push(cb)
    },
    response (aa) {
      _this.saveResponse.push(aa)
    },
  }
}

现在拦截器的方法已经写好了，我们应该在什么时候调用呢？

请求拦截一定是在请求发送之前进行调用，我们拿post来举例子：

iaxios.prototype.post = function (url, data) {
  this.data = data;
  let _this = this;
  // this.saveRequest && this.saveRequest(this)
  //请求之前调用请求拦截的回调函数
  if (this.saveRequest) {
    this.saveRequest.forEach(fn => {
      fn(this)
    })
  }

我们只需要在请求之前，把想要传递的数据copy下来（用于当作参数）。

然后循环调用我们保存下来的方法（其实就是调用的时候传递回调函数）

这样就能实现请求拦截了。

那么响应拦截一定是在返回响应数据之前调用了：

        if ((xhr.status == 200 || xhr.status == 304)) {
          //用来保存返回的数据
          let newRespose = new Object;
          newRespose.data = JSON.parse(xhr.responseText);
          //在返回数据之前调用相应拦截器的回调函数
          if (_this.saveResponse) {
            _this.saveResponse.forEach(fn => {
              fn(newRespose)
            })
          }
          resolve(newRespose.data)

这里面我们创建的newRespose也是为了当作参数传递到响应拦截的方法里面。

这样的话响应拦截器的实现也完成了。

4.代码

最后再把整体的代码复制一份：

// const { resolve, reject } = require("core-js/fn/promise")
function iaxios () {
  //保存拦截器中的回调函数
  this.saveRequest = []
  this.saveResponse = []
  //保存请求的数据
  this.data = {};
  let _this = this;
  this.interceptors = {
    request (cb) {
      _this.saveRequest.push(cb)
    },
    response (aa) {
      _this.saveResponse.push(aa)
    },
  }
}
iaxios.prototype.post = function (url, data) {
  this.data = data;
  let _this = this;
  // this.saveRequest && this.saveRequest(this)
  //请求之前调用请求拦截的回调函数
  if (this.saveRequest) {
    this.saveRequest.forEach(fn => {
      fn(this)
    })
  }
  //返回promise对象
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open('post', url, true);
    //设置请求头的配置
    setHeader(xhr, this.headers);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status == 200 || xhr.status == 304)) {
          //用来保存返回的数据
          let newRespose = new Object;
          newRespose.data = JSON.parse(xhr.responseText);
          // _this.saveResponse && _this.saveResponse(newRespose)
          //在返回数据之前调用相应拦截器的回调函数
          if (_this.saveResponse) {
            _this.saveResponse.forEach(fn => {
              fn(newRespose)
            })
          }
          resolve(newRespose.data)
        } else {
          reject(xhr.responseText)
        }
      }
    };
    xhr.send(JSON.stringify(data))
  })
}
iaxios.prototype.get = function (url) {
  let _this = this;
  // this.saveRequest && this.saveRequest(this)
  //请求之前调用请求拦截的回调函数
  if (this.saveRequest) {
    this.saveRequest.forEach(fn => {
      fn(this)
    })
  }
  //返回promise对象
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    //设置请求头的配置
    setHeader(xhr, this.headers);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status == 200 || xhr.status == 304)) {
          //用来保存返回的数据
          let newRespose = new Object;
          newRespose.data = JSON.parse(xhr.responseText);
          // _this.saveResponse && _this.saveResponse(newRespose)
          //在返回数据之前调用相应拦截器的回调函数
          if (_this.saveResponse) {
            _this.saveResponse.forEach(fn => {
              fn(newRespose)
            })
          }
          resolve(newRespose.data)
        } else {
          reject(xhr.responseText)
        }
      }
    };
    xhr.send()
  })
}
//返回一个新的实例并且复制obj的属性
iaxios.prototype.create = function (obj) {
  var emaxios = new iaxios()
  emaxios.headers = obj.headers;
  emaxios.baseUrl = obj.baseUrl;
  return emaxios;
}
//设置请求头的方法
function setHeader (xhr, headers) {
  for (var i in headers) {
    xhr.setRequestHeader(i, headers[i]);
  }
}
var taxios = new iaxios();
export {
  taxios
}

到此这篇关于JavaScript封装axios的实现详解的文章就介绍到这了,更多相关JS封装axios内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

sso跨域写cookie的一段js脚本(推荐)
下面小编就为大家带来一篇sso跨域写cookie的一段js脚本(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
关于axios返回空对象的问题解决
这篇文章主要给大家介绍了关于axios返回空对象的问题解决方法，文中介绍的非常详细，相信对大家学习或者使用axios具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
JavaScript删除数组元素的方法
这篇文章主要介绍了JavaScript删除数组元素的方法,实例分析了javascript中delete函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
webpack@v4升级踩坑(小结)
这篇文章主要介绍了webpack@v4升级踩坑(小结),之前就尝试了升级，由于部分插件的原因，未能成功,今天就来试一下在我的项目中升级会遇到哪些坑。感兴趣的小伙伴们可以参考一下
2018-10-10
JS连连看源码完美注释版(推荐)
连连看最难的部分应该是路径搜索，即鼠标点的两点之间看有无可通的路径。看过有人写的递归写法，心里痒痒，就捉摸了一下，发现不用递归的情况下难度也不大
2013-12-12
多次注册事件会导致一个事件被触发多次的解决方法
一个JavaScript逻辑，会自动绑定函数到按钮的click事件，但是这段代码会反复注册事件，具体的解决方法如下，感兴趣的朋友可以参考下
2013-08-08
浅析javaScript中的浅拷贝和深拷贝
本篇文章主要介绍了浅析javaScript中的浅拷贝和深拷贝，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
silverlight线程与基于事件驱动javascript引擎（实现轨迹回放功能）
前一段时间一直在重构工作站轨迹回放功能,一开始我觉得很简单,但是后面引发了一系列奇怪的问题,让我很疼,所以不得不写个总结加深记忆,
2011-08-08
js的event详解。
js的event详解。...
2006-09-09
layui动态设置单选按钮选中效果实例
最近在使用layui前端框架,在使用单选按钮、下拉菜单select、checkbox等控件的时候,往往遇到一些初始化的东西,下面这篇文章主要给大家介绍了关于layui动态设置单选按钮选中效果的相关资料,需要的朋友可以参考下
2023-06-06

JavaScript封装axios的实现详解

目录

摘要

1.post方法

2.create方法

3.拦截器

4.代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具