利用Promise自定义一个GET请求的函数示例代码


Posted in Javascript onMarch 20, 2019

写在最前面

近期 review 自己以前的代码的时候,看到 promise 的使用方法,用的比较模糊。含义不清,用法凌乱,这里重新温习一下基础知识。

前言

JavaScript 是单线程工作,但是浏览器是多线程的。为了更好的完成我们程序的任务。Promise 异步的操作就由此诞生了。

一个 Promise 就是一个代表了异步操作最终完成或者失败的结果对象。

怎么使用?

语法

基本

new Promise( function(resolve, reject) {...} /* executor */ );

Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的回调。 在回调中执行一些操作(例如异步),如果一切都正常,则调用 resolve,否则调用 reject。

then 的使用

promise.then(function(result) {
 console.log(result); // "Stuff worked!"
}, function(err) {
 console.log(err); // Error:"It broke"
});

then() 包含两个参数:一个用于成功情形的回调和一个用于失败情形的回调。 这两个皆可选,因此您可以只添加一个用于成功情形或失败情形的回调。

主要的 promise 的三个方法

Promise.all

        - 这个方法返回一个新的promise对象,该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功,一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后,会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值,顺序跟iterable的顺序保持一致;如果这个新的promise对象触发了失败状态,它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。 

Promise.reject

        - 返回一个状态为失败的Promise对象,并将给定的失败信息传递给对应的处理方法。 

        return Promise.reject(error);

Promise.resolve

        - 返回一个状态由给定value决定的Promise对象。如果该值是thenable(即,带有then方法的对象),返回的Promise对象的最终状态由then方法执行决定;否则的话(该value为空,基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled,并且将该value传递给对应的then方法。通常而言,如果你不知道一个值是否是Promise对象,使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。   

怎么创建一个 Promise

Promise 对象是由关键字 new 及其构造函数来创建的。

const myFirstPromise = new Promise((resolve, reject) => {
 // ?做一些异步操作,最终会调用下面两者之一:
 //
 // resolve(someValue); // fulfilled
 // ?或
 // reject("failure reason"); // rejected
});

想让某个函数拥有 Promise 功能?让他放回一个 Promise 对象就可以了:

function myAsyncFunction(url) {
 return new Promise((resolve, reject) => {
 const xhr = new XMLHttpRequest();
 xhr.open("GET", url);
 xhr.onload = () => resolve(xhr.responseText);
 xhr.onerror = () => reject(xhr.statusText);
 xhr.send();
 });
};

Demo: 1 -- 创建一个 GET 请求的简单函数

function get(url) {
 // 返回一个 promise 对象.
 return new Promise(function(resolve, reject) {
 // 创建一个 XML 对象
 var req = new XMLHttpRequest();
 req.open('GET', url);

 req.onload = function() {
  
  if (req.status == 200) {
  // 请求 200的时候处理 response 
  resolve(req.response);
  }
  else {
  // 处理请求错误信息
  reject(Error(req.statusText));
  }
 };

 // 处理网络错误信息
 req.onerror = function() {
  reject(Error("Network Error"));
 };

 // 发送请求
 req.send();
 });
}

现在我们来使用吧

get('story.json').then(function(response) {
 console.log("Success!", response);
}, function(error) {
 console.error("Failed!", error);
})

Demo: 2 -- 创建一个图片上传的 Promise 函数

function imgLoad(url) {
 //创建一个图片上传的 Promise() constructor;
 return new Promise(function(resolve, reject) {
  
  var request = new XMLHttpRequest();
  request.open('GET', url);
  request.responseType = 'blob';
  
  request.onload = function() {
  if (request.status === 200) {
  
   resolve(request.response);
  } else {
  
   reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
  }
  };
  request.onerror = function() {
  
   reject(Error('There was a network error.'));
  };
  
  request.send();
 });
 }

 // 挂载到 body 上面去
 var body = document.querySelector('body');
 var myImage = new Image();
 
 // 使用
 imgLoad('myLittleVader.jpg').then(function(response) {
 
 //第一步 处理 resolve() method.
 var imageURL = window.URL.createObjectURL(response);
 myImage.src = imageURL;
 body.appendChild(myImage);
 
 }, function(Error) {
 
 // 处理错误
 console.log(Error);
 });

下篇文章预告

大概内容:promise 和错误处理详解,JavaScript 异步和 promise

参考

  • MDN-Promise
  • Google-Develop

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 #Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 #Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 #Javascript
详解JavaScript作用域和作用域链
Mar 19 #Javascript
vue双向绑定及观察者模式详解
Mar 19 #Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 #Javascript
在vue中使用G2图表的示例代码
Mar 19 #Javascript
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
ie focus bug 解决方法
2009/09/03 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python re的findall和finditer的区别详解
2020/11/15 Python
局部内部类是否可以访问非final变量?
2013/04/20 面试题
文秘专业大学生求职信
2013/11/10 职场文书
岗位职责怎么写
2014/03/14 职场文书
讲党性心得体会
2014/09/03 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
基于Python实现一个春节倒计时脚本
2022/01/22 Python
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技