当前位置:   article > 正文

源码 axios 的创建过程模拟实现

源码 axios 的创建过程模拟实现

1、在实例对象上添加两个属性:default(默认配置)  与 interscptors

  1. // //构造函数
  2. function Axios(config) {
  3. //初始化
  4. this.defaults = config;//为了创建 default 默认属性
  5. this.interceptors = {
  6. request: {},
  7. response: {}
  8. }
  9. }

2、在原型对象上添加方法

  1. //原型添加相关的方法
  2. Axios.prototype.request = function (config) {
  3. console.log('发送 AJAX 请求 请求的类型为 ' + config.method);
  4. }
  5. Axios.prototype.get = function (config) {
  6. return this.request({ method: 'GET' });
  7. }
  8. Axios.prototype.post = function (config) {
  9. return this.request({ method: 'POST' });
  10. }

3、通过bind方法,将实例对象中的属性与方法添加到instance中,并将instance返回,实现将axios当作对象或方法使用。

  1. //声明函数
  2. function createInstance(config) {
  3. //实例化一个对象
  4. let context = new Axios(config);
  5. // context.get() context.post() 但是不能当做函数使用 context() X
  6. //创建请求函数
  7. let instance = Axios.prototype.request.bind(context);
  8. // instance 是一个函数 并且可以 instance({}) 此时 instance 不能 instance.get X
  9. //将 Axios.prototype 对象中的方法添加到instance函数对象中
  10. Object.keys(Axios.prototype).forEach(key => {
  11. instance[key] = Axios.prototype[key].bind(context);
  12. // this.default this.interceptors
  13. });
  14. // //为 instance 函数对象添加属性 default 与 interceptors
  15. Object.keys(context).forEach(key => {
  16. instance[key] = context[key];
  17. });
  18. return instance;
  19. }
  20. let axios = createInstance();
  21. axios.get({});
  22. axios.post({});

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/586705
推荐阅读
相关标签
  

闽ICP备14008679号