文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

axios库的核心代码解析及总结

2024-04-02 19:55

关注

一、关键步骤

1.创建axios对象

axios库导出的对象是一个已经被创建好的axios对象,它本质上是一个方法,可以直接接收一个config配置参数进行请求。在库的入口处,即可看到如下代码:

function createInstance(defaultConfig) {
  // 传入默认配置生成axios对象
  const context = new Axios(defaultConfig);
  // 本质是request方法,this上下文绑定context
  const instance = bind(Axios.prototype.request, context);
  // 将Axios原型上的属性复制到instance
  utils.extend(instance, Axios.prototype, context, {allOwnKeys: true});
  // 将context上的属性复制到instance
  utils.extend(instance, context, {allOwnKeys: true});
  // 暴露create工厂方法供外部创建自定义的axios对象
  instance.create = function create(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };

  return instance;
}
// 默认暴露的axios对象
const axios = createInstance(defaults);

上述代码是创建默认axios对象的流程,这个对象上有Axios类的实例属性以及原型上的方法,且自身的是一个request方法,整个库最核心的也就是这个request方法。

2.请求

Axios的原型上存在很多辅助方法,如get,post,put等等,这些方法最终都会调用request方法,且默认设置了请求参数中的method属性,仅仅是一种封装的快捷调用方式。所以直接使用axios方法(axios的本质是一个方法),传入一个合法参数和使用axios.get等方法进行请求没有区别

二、Axios类

1.基础属性

axios类型的对象,存在2个基础属性

2.辅助方法

axios类型的对象存在很多辅助方法,如下:

这些方法本质上都是request的封装,调用这些方法时,都会调用request方法,但相应的会预设置部分请求参数,如method和headers

3.request方法

这个方法是整个库的核心,它接收一个配置作为参数。内部流程如下:

axios对象在创建时,会传入一个默认请求配置对象,这个对象会和请求时传入的请求配置对象进行合并。

合并后的对象需要进一步处理headers,一些headers配置只针对特定类型的请求,如get类型。

这一步是整个request设计的较为精妙的地方。执行队列有2种执行模式,同步模式和异步模式,默认为异步模式。分别如下:

简单来说,就是request拦截器,request请求,response拦截器一起组成了一个执行队列。在异步模式下,队列里面每一个执行方法执行完成之后,会继续调用下一个执行方法。同步模式下,request拦截器和request请求会按顺序同步执行,但response拦截器会在请求返回后异步执行

三、adpter适配器

Axios库是跨平台的,可以在node环境和web环境同时使用。因此内部有个"适配器"的概念,adpter是一个方法,一个请求本质上就是调用这个方法,方法必须返回一个Promise对象。请求配置中,甚至可以让我们自己去实现自己的适配器。

// `adapter` 允许自定义处理请求,这使测试更加容易。 // 返回一个 promise 并提供一个有效的响应 (参见 lib/adapters/README.md)。

adapter: function (config) {  },

如果提供了这么一个参数,那么将不会采用默认的适配器,一般供测试使用。

1.xhradpter

xhradpter适配器适用于web环境,利用XMLHttpRequest对象实现。本质上就是在操作一个XMLHttpRequest对象。

2.httpadpter

httpadpter适配器适用于node环境,利用node原生的http模块实现。

以上就是axios库的核心代码解析及总结的详细内容,更多关于axios库核心代码的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯