网站 多线,手机网站开发公司电话,网站开发管理学什么,广西茶叶学会 网站建设文章目录 一、模块化目录介绍二、创建 axios 函数对象1、创建 axios.js 文件2、创建 defaults.js 文件3、创建 _Axios.js 文件4、总结 当前篇章正式进入手写 axios 源码系列#xff0c;我们要真枪实弹的开始写代码了。
因为 axios 源码的代码量比较庞大#xff0c;所以我们这… 文章目录 一、模块化目录介绍二、创建 axios 函数对象1、创建 axios.js 文件2、创建 defaults.js 文件3、创建 _Axios.js 文件4、总结 当前篇章正式进入手写 axios 源码系列我们要真枪实弹的开始写代码了。
因为 axios 源码的代码量比较庞大所以我们这里只抓主线让大家对 axios 的主要核心功能有个大概了解至于具体的细节深入需要大家去通读 axios 源码了解。手写 axios 源码系列只将其中的4个主要功能模块进行了手写就是在上篇文章 手写axios源码系列一axios核心知识点 中介绍的四个核心功能点
axios 函数对象dispatchRequest 发送请求interceptors 拦截器cancelToken 取消请求
一、模块化目录介绍
建议大家先下载 axios 的源码然后过一遍源码的目录文件主要文件全部在 lib 目录下这里我就不一一介绍了。 接下来看一下我手写 axios 源码所创建的目录介绍文件名称依据源码文件名称命名 _Axios.jsaxios的构造函数因为有一个 axios.js文件名不区分大小写会重复所以添加了下横杠 _Axios 防止文件名重复其中 request 方法为重点拦截器功能在这里书写adapters.js适配器其中有一个方法 getAdapter 来获取发送请求的方式 xhr 或者 http axios.js整个目录的入口文件创建了axios 函数对象以及对外暴露了一些属性以及方法CancelToken取消请求的功能代码defaults.js默认配置项预配置dispatchRequest.js真正发送请求以及接收响应数据的文件目录index.html手写axios源码的测试代码测试一下自己写的代码是否正确InterceptorManager拦截器的构造函数xhr.js书写 AJAXAsynchronous Javascript And XML 代码的文件目录。
二、创建 axios 函数对象
1、创建 axios.js 文件
import Axios from ./_Axios.js;
import defaults from ./defaults.js;
import CancelToken from ./CancelToken;// 初始化 axios 函数对象
function createInstance(defaultConfig){// 生成 _Aixos 的实例对象const context new Axios(defaultConfig);// 生成 instance 绑定函数并且绑定 this 为 context防止调用时 this 指向不明const instance Axios.prototype.request.bind(context, ...arguments);// 将 context 实例对象的属性复制到 instance 上Object.keys(context).forEach(key{instance[key] context[key]})// 将 Axios 原型对象的属性复制到 instance 上Object.keys(Axios.prototype).forEach(key{instance[key] Axios.prototype[key]})// axios.create 方法instance.create function(instanceConfig){const mergeConfig {...defaultConfig,...instanceConfig}return createInstance(mergeConfig);}// instance 就是 axiosreturn instance;
}
// 创建 axios 函数对象
const axios createInstance(defaults);
// 对外暴露 CancelToken 类取消请求时使用
axios.CancelToken CancelToken;
// 导出 axios
export default axios;2、创建 defaults.js 文件
export default {// 适配器的默认配置写适配器 adapters 代码时需要传入的配置adapter: [xhr, http]
}3、创建 _Axios.js 文件
import InterceptorManager from ./IntercptorManager.js;
import dispatchRequest from ./dispatchRequest.js;export default class Axios {constructor(config){// 实例对象的 defaults属性默认配置对象this.defaults config;// 实例对象的 interceptors属性拦截器this.interceptors {request: new InterceptorManager(),response: new InterceptorManager()}}// request 发送请求request(configOrUrl, config){// 判断 configOrUrl是否为 url地址if(typeof configOrUrl string){config.url configOrUrl} else {config {...configOrUrl,...config}}// 将 config包装为一个成功状态的 promise对象let promise Promise.resolve(config);// 创建执行链这里调用 dispatchRequest方法以发送请求const chain [dispatchRequest, undefined];// 调用 promise.then()将 config传入 dispatchRequest中dispatchRequest中返回的也是一个 prommise对象promise promise.then(chain[0], chain[1]);// 发送请求后返回的是一个 promise对象return promise;}
}
const methodsWithNoData [delete, get, head, options];
const methodsWithData [post, put, patch];
// 给 Axios的原型对象添加请求方法
methodsWithNoData.forEach(method {Axios.prototype[method] function(url, config){config { ...config, method, url };// 最后返回 request生成的 promise对象return this.request(config)}
})
methodsWithData.forEach(method {Axios.prototype[method] function(url, data, config){config { ...config, method, url, data };return this.request(config)}
})4、总结
以上代码包含了 axios 函数对象的创建过程
使用 createInstance() 生成 axios 函数对象 先实例化对象 context然后使用 Axios.prototype.request 方法 bind 一个新函数 instance调用 instance() 就相当于调用 Axios.prototype.request()生成的新函数 instance 没有任何属性以及方法可以使用所以将 context 以及 Axios.prototype 上的属性以及方法复制给 instance 使用挂载一个 create 方法供 axios 封装使用调用 create() 方法其实就是调用 createInstance() 方法。 为 axios 挂载其他属性对外暴露以供使用。导出 axios 函数对象。
下篇文章我们着重讲解发送请求 dispatchRequest 以及适配器 adapters 。
