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

写在最前面

近期 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

参考

总结

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

(0)

相关推荐

  • node使用promise替代回调函数

    在学习 Node.js 过程中接触到了如何使用 async 来控制并发(使用 async 控制并发) async 的本质是一个流程控制.其实在异步编程中,还有一个更为经典的模型,叫做 Promise/Deferred 模型(当然还有更多相关解决方法,比如 eventproxy,co 等,到时候遇到在挖坑) 首先,我们思考一个典型的异步编程模型,考虑这样一个题目:读取一个文件,在控制台输出这个文件内容 var fs = require('fs'); fs.readFile('1.txt', 'ut

  • promise和co搭配生成器函数方式解决js代码异步流程的比较

    在es6中引入的原生Promise为js的异步回调问题带来了一个新的解决方式,而TJ大神写的co模块搭配Generator函数的同步写法,更是将js的异步回调带了更优雅的写法. 今天我想对比一下这两种方式,来看看这两种方式的区别以及优劣. 我们先抽象几个操作: 以做饭为例,我们先去买菜,回来洗菜,刷碗,烧菜,最后才是吃.定义如下方法: var buy = function (){}; //买菜,需要3s var clean = function(){}; //洗菜,需要1s var wash =

  • 详解在微信小程序的JS脚本中使用Promise来优化函数处理

    在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入Promise确实能够很好的解决异步回调函数的可读性等问题,同时也使得我们调用的时候代码简洁一些,本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法. 1.小程序传统的回调处理 例如我们生成一个小程序,里面的app.js里面就自动带有一个getUserInfo的函数,这个是使用

  • JS中Promise函数then的奥秘探究

    Promise概述 Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口. 那么,什么是Promises? 首先,它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样:其次,它起到代理作用(proxy),充当异步操作与回调函数之间的中介.它使得异步操作具备同步操作的接口,使得程序具备正常的同步运行的流程,回调函数不必再一层层嵌套. 简单说,它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程.这

  • NodeJS中利用Promise来封装异步函数

    在写Node.js的过程中,连续的IO操作可能会导致"金字塔噩梦",回调函数的多重嵌套让代码变的难以维护,利用CommonJs的Promise来封装异步函数,使用统一的链式API来摆脱多重回调的噩梦. Node.js提供的非阻塞IO模型允许我们利用回调函数的方式处理IO操作,但是当需要连续的IO操作时,你的回调函数会多重嵌套,代码很不美观,而且不易维护,而且可能会有许多错误处理的重复代码,也就是所谓的"Pyramid of Doom". 复制代码 代码如下: ste

  • 详解如何构建Promise队列实现异步函数顺序执行

    场景 有a.b.c三个异步任务,要求必须先执行a,再执行b,最后执行c 且下一次任务必须要拿到上一次任务执行的结果,才能做操作 思路 我们需要实现一个队列,将这些异步函数添加进队列并且管理它们的执行,队列具有First In First Out的特性,也就是先添加进去的会被先执行,接着才会执行下一个(注意跟栈作区别) 大家也可以类比一下jQuery的animate方法,添加多个动画也会按顺序执行 解决 模拟3个异步函数 // 异步函数a var a = function () { return

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

    写在最前面 近期 review 自己以前的代码的时候,看到 promise 的使用方法,用的比较模糊.含义不清,用法凌乱,这里重新温习一下基础知识. 前言 JavaScript 是单线程工作,但是浏览器是多线程的.为了更好的完成我们程序的任务.Promise 异步的操作就由此诞生了. 一个 Promise 就是一个代表了异步操作最终完成或者失败的结果对象. 怎么使用? 语法 基本 new Promise( function(resolve, reject) {...} /* executor *

  • Python利用tkinter实现一个简易番茄钟的示例代码

    之前捣鼓树莓派时,要求做一个番茄钟,但最后就只是搞成一个与树莓派没啥关系的py程序,虽然简陋,但就此记录一下自学的成果. 程序实现番茄工作法:25分钟工作,5分钟休息 完成一次番茄工作时间,就记一个番茄 (不把休息时间算在里面,有时候自己都不想休息,好吧,是我不知道怎么把番茄工作时间和休息时间联系在一块来记录番茄个数) 这个程序倒计时显示的是从24:59开始,是因为按的时候算是1秒? 运行界面如下: 自己感觉这个界面还行,朴素中带着点高级感 代码参考了一些大佬写的番茄钟程序,特别是那个倒计时的实

  • 利用js实现Ajax并发请求限制请求数量的示例代码

    出现问题描述:当不确定异步请求个数时,为防止当一瞬间发生上百个http请求时,导致堆积了无数调用栈进而导致内存溢出问题. 要求:将同一时刻并发请求数量控制在3个以内,同时还要尽可能快速的拿到响应的结果. 同面试问题: 实现一个批量请求函数 multiRequest(urls, maxNum),要求如下: 要求最大并发数 maxNum 每当有一个请求返回,就留下一个空位,可以增加新的请求 所有请求完成后,结果按照 urls 里面的顺序依次打出 1.基于Promise.all实现Ajax的串行和并行

  • 利用Java手写一个简易的lombok的示例代码

    目录 1.概述 2.lombok使用方法 3.lombok原理解析 4.手写简易lombok 1.概述 在面向对象编程中,必不可少的需要在代码中定义对象模型,而在基于Java的业务平台开发实践中尤其如此.相信大家在平时开发中也深有感触,本来是没有多少代码开发量的,但是因为定义的业务模型对象比较多,而需要重复写Getter/Setter.构造器方法.字符串输出的ToString方法.Equals/HashCode方法等.我们都知道Lombok能够替大家完成这些繁琐的操作,但是其背后的原理很少有人会

  • JavaScript/TypeScript 实现并发请求控制的示例代码

    场景 假设有 10 个请求,但是最大的并发数目是 5 个,并且要求拿到请求结果,这样就是一个简单的并发请求控制 模拟 利用 setTimeout 实行简单模仿一个请求 let startTime = Date.now(); const timeout = (timeout: number, ret: number) => { return (idx?: any) => new Promise((resolve) => { setTimeout(() => { const compa

  • 利用Go语言实现流量回放工具的示例代码

    目录 前言 goreplay介绍与安装 使用示例 流量放大.缩小 流量写入到ElastichSearch goreplay基本实现原理 总结 前言 哈喽,大家好,我是asong. 今天给大家推荐一款使用Go语言编写的流量回放工具 -- goreplay:工作中你一定遇到过需要在服务器上抓包的场景,有了这个工具就可以助你一臂之力,goreplay的功能十分强大,支持流量的放大.缩小,并且集成了ElasticSearch,将流量存入ES进行实时分析: 废话不多,我们接下来来看一看这个工具: gore

  • 使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下所示: 有一张user表和留言表,关系为一对多,留言表有父留言字段的id,和自身有一个一对多的关系,建表语句如下: CREATE TABLE `message` ( `id` int NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, `content` text

  • SpringBoot通过自定义注解实现日志打印的示例代码

    前言 在我们日常的开发过程中通过打印详细的日志信息能够帮助我们很好地去发现开发过程中可能出现的Bug,特别是在开发Controller层的接口时,我们一般会打印出Request请求参数和Response响应结果,但是如果这些打印日志的代码相对而言还是比较重复的,那么我们可以通过什么样的方式来简化日志打印的代码呢? SpringBoot 通过自定义注解实现权限检查可参考我的博客:SpringBoot 通过自定义注解实现权限检查 正文 Spring AOP Spring AOP 即面向切面,是对OO

  • C#调用HTTP POST请求上传图片的示例代码

    现在很多B/S系统的开发都是通过API方式来进行的,一般服务端会开放一个API接口,客户端调用API接口来实现图片或文件上传的功能. GET和POST是什么?HTTP协议中的两种发送请求的方法. HTTP是什么?HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议. HTTP的底层是TCP/IP.所以GET和POST的底层也是TCP/IP,也就是说,GET/POST都是TCP链接.GET和POST能做的事情是一样一样的.你要给GET加上request body,给POST带上url参

  • C#实现自定义打印文字和图片的示例代码

    目录 1.调用打印机设置 2.关联文档 3.绘制内容 C#中打印其实就是自己绘图+调用系统打印函数,于是便有了以下操作 1.调用打印机设置 如果你想在打印前设置打印机属性(或者切换打印机),请务必添加这段代码,否则电脑会直接按照预设的设置进行打印(打印机都没法选) //打印机设置 PrintDialog printDialog = new PrintDialog(); printDialog.Document = ptDoc; printDialog.ShowDialog(); ptDoc就是打

随机推荐