axios内部运作流程大致如下axios入口-

->axios构造函数-

->interceptors请求拦截器-

->dispatchRequest方法-

->transformRequest请求转换器-

->adapter适配器-

->transformResponse响应转换器-

->interceptors响应拦截器

具体模拟实现axios使用dispatchRequest方法,以及adapter适配器发送一个异步请求的核心代码//模拟axios发送请求

//1、声明构造函数

function Axios(config){

this.config = config;

}

//为Axios的原型对象添加request方法,axios(),axios.get()等,核心就是调axios.request()方法

Axios.prototype.request = function(config){

//创建一个promise对象

let promise = Promise.resolve(config);

//声明一个数组,保存promise的then方法的两个参数

let chains = [dispatchRequest, undefined]; //undefined作用是占位

//调用then方法,指定回调

let result = promise.then(chains[0],chains[1]);

//返回promise的结果

return result;

}

//2、dispatchRequest函数

function dispatchRequest(config){//该函数的返回结果必须是一个promise对象

//调用适配器发送请求

return xhrAdapter(config).then(response => {

//省略对响应结果进行转换处理

return response;

},error=>{

throw error;

})

}

//3、adapter适配器

function xhrAdapter(config){ //该函数的返回值也是promise

return new Promise((resolve,reject)=>{

//不考虑请求体的发送,创建一个异步请求

let xhr = new XMLHttpRequest();

xhr.open(config.method, config.url);

xhr.send();

//绑定事件

xhr.onreadystatechange = function(){

if(xhr.readyState === 4) {

if(xhr.status >= 200 && xhr.status < 300) {

resolve({

//自定义返回数据

config: config, //配置对象

data: xhr.response, //响应体

headers: xhr.getAllResponseHeaders(),

request: xhr,//请求对象

status: xhr.status,//响应状态码

statusText: xhr.statusText //响应状态字符串

})

} else {

reject(new Error('请求失败状态码为'+xhr.status))

}

}

}

})

}

//测试创建axios函数

let axios = Axios.prototype.request.bind(null)

//用axios发送请求

axios({

method:'GET',

url:'http://localhost:3000/posts'

}).then(res=>{

console.log(res)

})

php使用axios发送请求,axios源码之模拟实现axios发送请求相关推荐

  1. (Ajax)axios源码简析(三)——请求与取消请求

    传送门: axios源码简析(一)--axios入口文件 axios源码简析(二)--Axios类与拦截器 axios源码简析(三)--请求与取消请求 请求过程 在Axios.prototype.re ...

  2. axios从入门到源码分析 -http-xhr

    axios从入门到源码分析 1 HTTP相关 1.1.MDN文档 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview 1.2. HTT ...

  3. 第三季2:ORTP库的源码分析、RTP发送实验的源码分析

    以下内容源于朱有鹏课程,如有侵权,请告知删除. 一.ORTP库源码分析 1.ORTP库概览 (1)库提供一堆功能函数(本身没有main),都在src目录下 (2)库的使用给了案例(有main),在sr ...

  4. Soul 网关源码阅读(四)Dubbo请求概览

    Soul 网关源码阅读(四)Dubbo请求概览 简介     本次启动一个dubbo服务示例,初步探索Soul网关源码的Dubbo请求处理流程 示例运行 环境配置     在Soul源码clone下来 ...

  5. GK309协议电子工牌数据模拟器+Socket数据发送 JAVA版-源码

    GK309协议电子工牌数据模拟器+Socket数据发送 JAVA版-源码 说明 源码 EXE执行文件 说明 单JAVA文件,直接运行main方法即可. 只做了GK309的基础位置数据模拟: 0x01 ...

  6. 抢红包 html 模板,微信抢红包源码和模拟demo

    微信抢红包源码和模拟demo 资源下载此资源下载价格为3D币,请先登录 资源文件列表 K_wechat/.classpath , 475 K_wechat/.project , 844 K_wecha ...

  7. axios网络请求框架源码解析

    早期axios0.1.0版本做了对IE浏览器与包含XmlHttpRequest的浏览器的支持.并且做了对请求参数拼接.Json对象序列化等基本功能. 到0.19.0版本时,内部请求已经变为了在Node ...

  8. axios(三)- 源码

    0.热门请求库 1.axios的特性 2.axios的使用 3.核心目录结构 4.执行流程 5.Axios 中的公共方法 6.Axios 如何支持不同的使用方式? 7. 请求 / 响应拦截器是如何生效 ...

  9. dispatcherservlet发送2次请求_Spring源码分析(三):MVC请求分发器DispatcherServlet设计实现...

    概述 DispatcherServlet是SpringMVC的一个前端控制器,是MVC架构中的C,即controller的实现,用于拦截这个web应用的所有请求,具体为在web.xml中配置这个ser ...

最新文章

  1. Oracle二三事之 12c 可插拔数据库PDB
  2. 深入理解移动开发的模板复用机制
  3. 舍选法抽样matlab,12 重要抽样法 | 统计计算
  4. 未定义的引用_Rust 引用和借阅
  5. 第10章 springboot是什么
  6. python单词反转_python文本 字符串逐字符反转以及逐单词反转
  7. Altium Designer之PCB
  8. 【AI面试题】分类问题常用的性能度量指标(评价指标)
  9. DFS分布式文件系统安装部署
  10. Android异常处理——try、catch、finally、throw、throws
  11. paip.信用卡账单处理系统功能vO22
  12. XenServer 6.5实战系列之九:Creating a VM Template from a VM Snapshot
  13. 手机内存如何快速自清理
  14. gamma软件linux安装图示,Ubuntu下安装GAMMA过程(转)
  15. Frog青蛙的约会【浙江省选2002】(数论)
  16. iOS adhoc 版本App 如何制作安装
  17. python生成单位矩阵_python 实现一个反向单位矩阵示例
  18. 一个简单的仓库管理系统
  19. 51单片机最小系统板制作过程
  20. 图片asp木马的制作方法[转]

热门文章

  1. 我听后很高兴的C++
  2. 新浪uc2010免费下载
  3. 程序员熬夜写代码,用C/C++打造一个安全的即时聊天系统
  4. cgi mysql数据库_Perl CGI中操作Mysql数据库
  5. 监督学习 | SVM 之非线性支持向量机原理
  6. pytorch分布式训练(一):torch.nn.DataParallel
  7. 科研福利!北京超算获通用CPU算力第一,2000核时免费领取
  8. 单细胞转录组基本概念(一)
  9. UCI机器学习数据集
  10. 五种方法,教你如何在Mac上查看文件完整路径