利用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 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
再谈JavaScript线程
Jul 10 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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
使用PHP制作新闻系统的思路
2006/10/09 PHP
php魔术变量用法实例详解
2014/11/13 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
django foreignkey(外键)的实现
2019/07/29 Python
python装饰器代替set get方法实例
2019/12/19 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python enumerate内置库用法解析
2020/02/24 Python
从python读取sql的实例方法
2020/07/21 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
中专自我鉴定范文
2013/10/16 职场文书
护林防火标语
2014/06/27 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
使用numpy nonzero 找出非0元素
2021/05/14 Python