文档章节

用promise封装原生ajax请求

帅的人连bug都讨厌
 帅的人连bug都讨厌
发布于 2017/07/24 15:39
字数 123
阅读 63
收藏 0

// 简单的ajax原生实现  

  1. var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';  
  2. var result;  
  3.   
  4. var XHR = new XMLHttpRequest();  
  5. XHR.open('GET', url, true);  
  6. XHR.send();  
  7.   
  8. XHR.onreadystatechange = function() {  
  9.     if (XHR.readyState == 4 && XHR.status == 200) {  
  10.         result = XHR.response;  
  11.         console.log(result);  
  12.     }  
  13. }  
  14.   
  15.   
  16. var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';  
  17.   
  18. // 封装一个get请求的方法  
  19. function getJSON(url) {  
  20.     return new Promise(function(resolve, reject) {  
  21.         var XHR = new XMLHttpRequest();  
  22.         XHR.open('GET', url, true);  
  23.         XHR.send();  
  24.   
  25.         XHR.onreadystatechange = function() {  
  26.             if (XHR.readyState == 4) {  
  27.                 if (XHR.status == 200) {  
  28.                     try {  
  29.                         var response = JSON.parse(XHR.responseText);  
  30.                         resolve(response);  
  31.                     } catch (e) {  
  32.                         reject(e);  
  33.                     }  
  34.                 } else {  
  35.                     reject(new Error(XHR.statusText));  
  36.                 }  
  37.             }  
  38.         }  
  39.     })  
  40. }  
  41.   
  42. getJSON(url).then(res => console.log(res));  

© 著作权归作者所有

上一篇: vue笔记
下一篇: ES6 的 Promise 对象
帅的人连bug都讨厌
粉丝 3
博文 53
码字总数 40134
作品 0
杭州
程序员
私信 提问
简述ajax和axios、fetch的区别

1.jQuery ajax $.ajax({type: 'POST',url: url,data: data,dataType: dataType,success: function () {},error: function () {}}); 传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送......

大灰狼的小绵羊哥哥
03/19
0
0
重学JS(十二)—— Ajax和fetch,你选哪个

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术...

闪闪发光的狼
2018/06/16
0
0
异步JavaScript与Promise

异步? 我在很多地方都看到过异步(Asynchronous)这个词,但在我还不是很理解这个概念的时候,却发现自己常常会被当做“已经很清楚”(* ̄ロ ̄)。 如果你也有类似的情况,没关系,搜索一下这个...

银月光海
2015/02/02
0
0
应用Promise封装Ajax实践

引: axios在项目中经常使用,但有次面试让我把ajax封装成axios形式,当时居然没写出来。看来还是不能停留在使用的表层。 回来研究promise觉得也并不是很难,关键是掌握Promise A+规范以及P...

非常兔
2018/08/08
0
0
fetch body里数据为ReadableStream 解决办法

转载自https://www.cnblogs.com/winyh/p/7053054.html 前端工程中发送 HTTP 请求从来都不是一件容易的事,前有骇人的 ,后有 API 设计十分别扭的 ,甚至这些原生 API 的用法至今仍是很多大公...

低至一折起
2017/11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows下cmd常用的命令

windows下常用的命令指示行: windows下 CMD比较常见的命令1. gpedit.msc-----组策略 2. sndrec32-------录音机 3. Nslookup-------IP地址侦测器 4. explorer-------打开资源管理器...

WinkJie
23分钟前
1
0
折叠手机适配布局

CSS Grid 设备相关参数 媒体查询 Chrome进行调试,创建相应的模拟机

lilugirl
24分钟前
0
0
Knative Eventing 中如何实现 Registry 事件注册机制

摘要: 在最新的 Knative Eventing 0.6 版本中新增了 Registry 特性, 为什么要增加这个特性, 该特性是如何实现的。针对这些问题,希望通过本篇文章给出答案。 背景 作为事件消费者,之前是...

阿里云云栖社区
28分钟前
0
0
安装 jemalloc for mysql

前言: Jemalloc 是BSD的提供的内存分配管理 安装依赖 $ yum install -y gcc$ yum install autoconf -y 安装 jemalloc $ git clone https://github.com/jemalloc/jemalloc$ cd jema......

Linux_Anna
38分钟前
2
0
linux下ctrl+c中止不了

有一台centos7的服务器,ctrl+c无效,并且tail -f也无效,只能关掉终端或者crtl+z放入后台再删掉,但是ping的时候使用ctrl+c是有效果的。 出现这种情况的原因可能是因为有人要使用ruby安装r...

gaolongquan
52分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部