首页 / JAVASCRIPT / JavaScript Promise 用法

JavaScript Promise 用法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript Promise 用法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6877字，纯文字阅读大概需要10分钟。

内容图文

同步编程通常来说易于调试和维护，然而，异步编程通常能获得更好的性能和更大的灵活性。异步的最大特点是无需等待。“Promises”渐渐成为JavaScript里最重要的一部分，大量的新API都开始promise原理实现。下面让我们看一下什么是promise，以及它的API和用法！

Promises现状

XMLHttpRequest API是异步的，但它没有使用promise API。但有很多原生的 javascript API 使用了promise：

*Battery API
*fetch API (XHR的替代品)
*ServiceWorker API

Promises将来只会变得越来越流行、普遍，非常重要，所有的前端开发人员都将用到它。另一个值得注意的是，Node.js是基于Promises的平台(很显然，Promise是它的一个核心特征)。

Promises的用法比你想象的要简单——如果你以前喜欢使用setTimeout来控制异步任务的话！

Promise基本用法

new Promise()构造器可以用在传统的异步任务中，就像以前 setTimeout 和 XMLHttpRequest 的用法一样。一个新的 Promise 使用 new 关键字生成，同时，这个 Promises 提供了 resolve 和 reject 函数让我们执行回调操作：

var p = new Promise(function(resolve, reject) {
 
 // Do an async task async task and then...

 if(/* good condition */) {
 resolve('Success!');
 }
 else {
 reject('Failure!');
 }
});

p.then(function() { 
 /* do something with the result */
}).catch(function() {
 /* error */
})

程序员可以手动的在回调函数内部根据执行情况调用 resolve 和 reject 函数。下面是一个比较具有现实意义的例子，它将一个 XMLHttpRequest 调用转换为基于 Promises 的任务：

// From Jake Archibald's Promises and Back:
// http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promisifying-xmlhttprequest

function get(url) {
 // Return a new promise.
 return new Promise(function(resolve, reject) {
  // Do the usual XHR stuff
  var req = new XMLHttpRequest();
  req.open('GET', url);

  req.onload = function() {
   // This is called even on 404 etc
   // so check the status
   if (req.status == 200) {
    // Resolve the promise with the response text
    resolve(req.response);
   }
   else {
    // Otherwise reject with the status text
    // which will hopefully be a meaningful error
    reject(Error(req.statusText));
   }
  };

  // Handle network errors
  req.onerror = function() {
   reject(Error("Network Error"));
  };

  // Make the request
  req.send();
 });
}

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

Promise.resolve() 和 Promise.reject() 可以直接被调用。有时候，当判断出 promise 并不需要真正执行时，我们并不需要使用 new 创建 Promise 对象，而是可以直接调用 Promise.resolve() 和 Promise.reject()。比如：

var userCache = {};

function getUserDetail(username) {
 // In both cases, cached or not, a promise will be returned

 if (userCache[username]) {
  // Return a promise without the "new" keyword
  return Promise.resolve(userCache[username]);
 }

 // Use the fetch API to get the information
 // fetch returns a promise
 return fetch('users/' + username + '.json')
  .then(function(result) {
   userCache[username] = result;
   return result;
  })
  .catch(function() {
   throw new Error('Could not find user: ' + username);
  });
}

因为 promise 肯定会返回，所以，我们可以使用 then 和 catch 方法处理返回值！

then 方法

所有的 promise 对象实例里都有一个 then 方法，它是用来跟这个 promise 进行交互的。首先，then 方法会缺省调用 resolve() 函数:

new Promise(function(resolve, reject) {
 // A mock async action using setTimeout
 setTimeout(function() { resolve(10); }, 3000);
})
.then(function(result) {
 console.log(result);
});

// From the console:
// 10

then 回调动作的触发时机是 promise 被执行完。我们还可以串联 then 方法执行回调操作：

new Promise(function(resolve, reject) { 
 // A mock async action using setTimeout
 setTimeout(function() { resolve(10); }, 3000);
})
.then(function(num) { console.log('first then: ', num); return num * 2; })
.then(function(num) { console.log('second then: ', num); return num * 2; })
.then(function(num) { console.log('last then: ', num);});

// From the console:
// first then: 10
// second then: 20
// last then: 40

你会发现，每次 then 调用都会以之前的 then 调用的返回值为参数。

如果一个 promise 已经执行完成，单 then 被再次调用时，回调动作将会被再次执行。而如果这个 promise 里执行的是reject 回调函数，这是再调用 then 方法，回调函数将不会被执行。

catch 方法

catch 当一个 promise 被拒绝(reject)时,catch 方法会被执行：

new Promise(function(resolve, reject) {
 // A mock async action using setTimeout
 setTimeout(function() { reject('Done!'); }, 3000);
})
.then(function(e) { console.log('done', e); })
.catch(function(e) { console.log('catch: ', e); });

// From the console:
// 'catch: Done!'

通常我们在 reject 方法里处理执行失败的结果，而在catch 里执行异常结果：

reject(Error('Data could not be found'));

Promise.all 方法

在我们的异步调用时经常有这样一种场景：我们需要同时调用多个异步操作，但希望只有等所有的操作都完成后，我们才去执行响应操作——这就是 Promise.all 的作用。 Promise.all 方法可以接收多个 promise 作为参数，以数组的形式，当这些 promise 都成功执行完成后才调用回调函数。

Promise.all([promise1, promise2]).then(function(results) {
 // Both promises resolved
})
.catch(function(error) {
 // One or more promises was rejected
});

一个很好的能演示 Promise.all 用法的例子是，执行多个 AJAX 操作(通过 fetch) 调用:

var request1 = fetch('/users.json');
var request2 = fetch('/articles.json');

Promise.all([request1, request2]).then(function(results) {
 // Both promises done!
});

我们还可将fetch和电池状态API混合一起执行，因为它们返回的都是 promise：

Promise.all([fetch('/users.json'), navigator.getBattery()]).then(function(results) {
 // Both promises done!
});

一旦 promise 里调用了reject函数，也就是执行被拒绝了，没有能够正常完成，情况会有些复杂。一旦 promise 被拒绝，catch 方法会捕捉到首个被执行的reject函数：

var req1 = new Promise(function(resolve, reject) { 
 // A mock async action using setTimeout
 setTimeout(function() { resolve('First!'); }, 4000);
});
var req2 = new Promise(function(resolve, reject) { 
 // A mock async action using setTimeout
 setTimeout(function() { reject('Second!'); }, 3000);
});
Promise.all([req1, req2]).then(function(results) {
 console.log('Then: ', one);
}).catch(function(err) {
 console.log('Catch: ', err);
});

// From the console:
// Catch: Second!

Promise.all 是非常重要的接口，将会在很多新诞生的 promise API中扮演重要的作用。

Promise.race

Promise.race 是一个有趣的函数——它不是等待所有的 promise 被resolve 或 reject，而是在所有的 promise 中只要有一个执行结束，它就会触发：

var req1 = new Promise(function(resolve, reject) { 
 // A mock async action using setTimeout
 setTimeout(function() { resolve('First!'); }, 8000);
});
var req2 = new Promise(function(resolve, reject) { 
 // A mock async action using setTimeout
 setTimeout(function() { resolve('Second!'); }, 3000);
});
Promise.race([req1, req2]).then(function(one) {
 console.log('Then: ', one);
}).catch(function(one, two) {
 console.log('Catch: ', one);
});

// From the console:
// Then: Second!

一个有用的场景是，从多个镜像服务器下载资源，一旦有一个返回，其它的返回也就不用处理了。

学会使用 Promises

Promises在过去几年是一个非常火爆的话题，它甚至从JavaScript里抽离出来变成了一个语言架构。相信很快我们将见到有愈来愈多的JavaScript API将使用以promise为基础的模式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的JavaScript Promise 用法全部内容，希望文章能够帮你解决JavaScript Promise 用法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/351718.html

来源：【匿名】

更多 ►

【JavaScript Promise 用法】教程文章相关的互联网学习教程文章

JavaScript 的 Async\/Await 完胜 Promise 的六【代码】

参考：http://www.10tiao.com/html/558/201705/2650964601/1.htmlNode 现在从版本 7.6 开始就支持 async/await 了。简介：Async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。Async/await 实际上是建立在 promise 的基础上。它不能与普通回调或者 node 回调一起用。Async/await 像 promise 一样，也是非阻塞的。Async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。语法：假设函...

JavaScript及其异步实现续:Promise让一切更简单【图】

在写这篇文章之前，我参考了以下文章。所以我文中的例子都是精准的，而且有循可依。下面抛出例子的链接： Understanding JQuery.Deferred and PromiseDeferred and promise in jQueryEdit:在翻网站的时候，看到腾讯技术团队居然也刚写了一篇Promise的文章，加下链接，以作备忘。JavaScript Promise启示录Deferred在JQuery1.5的版本被引进，这项功能的引进使JQuery变得更加强大，良好的异步支持，让书写异步JS变得简单轻松，而且...

Javascript的事件模型和Promise实现【代码】

1. Javascript的运行时模型——事件循环 JS的运行时是个单线程的运行时，它不像其他编程语言，比如C++，Java，C#这些可以进行多线程操作的语言。当它执行一个函数时，它只会一条路走到黑，不会在当前函数结束之前去调用其他的函数（除非当前函数主动调用其他函数）。它也不用担心会有其他线程打扰它，因为它的运行时只有一个线程。如果你还记得一些计算机原理的话，这种运行时只有一个栈，设计起来相当的简单。一条路走到黑的设计很...

javaScript Promise 入门【代码】【图】

Promise是JavaScript的异步编程模式，为繁重的异步回调带来了福音。一直以来,JavaScript处理异步都是以callback的方式，假设需要进行一个异步队列，执行起来如下：animate (ball1, 100, function () {animate (ball2, 200, function () {animate (ball3, 300, function () {animate (ball3, 150, function () {animate (ball2, 150, function () {animate (ball1, 150, function () {// do something})})})})})这就是所谓的回调金字...

你不知道的JavaScript--Item34 大白话讲解Promise【代码】【图】

去年6月份， ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。ES6 Promise 先拉出来遛遛一、Promise小试复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？别猜了，直接打印出来看看吧，console.dir(Pr...

Javascript Promises 介绍【代码】【图】

什么是 PromisesPromises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。传统的回调函数说到JavaScript的异步编程处理，通常我们会想到回调函数，如下面的代码：getFileAsync("1.txt", function(error, result){if(error){throw error;}// 取得成功时的处理 });上面的代码定义了一个获取文件内容的函数，读取完成后回调用传入的回调函数，对于下面的场景：－读取文件 1.tx...

js-20170830-Promise对象

1. 简介Promise 对象是 CommonJS 工作组提出的一种规范，目的是为异步操作提供统一接口.首先，它是一个对象，其次，它起到代理作用（proxy），充当异步操作与回调函数之间的中介。简单说，它的思想是，每一个异步任务立刻返回一个Promise对象，由于是立刻返回，所以可以采用同步操作的流程。这个Promises对象有一个then方法，允许指定回调函数，在异步任务完成后调用。 2. Promise接口Promise对象只有三种状态。异步操作“未完成”...

JS 异步系列 —— Promise 札记【代码】

Promise研究 Promise 的动机大体有以下几点：对其 api 的不熟悉以及对实现机制的好奇;很多库(比如 fetch)是基于 Promise 封装的，那么要了解这些库的前置条件得先熟悉 Promise;要了解其它更为高级的异步操作得先熟悉 Promise;基于这些目的，实践了一个符合 Promise/A+ 规范的 repromise。本札记系列总共三篇文章，作为之前的文章 Node.js 异步异闻录的拆分和矫正。Promise札记Generator札记Async札记Promise/A+ 核心在实现一个符合...

浅谈JavaScript中的对象及Promise对象的实现【代码】

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数。下面小编给大家收集整理些javascript中的对象及promise对象的实现。具体内容如下：到处都是对象window对象常用的属性和方法介绍location　　包含页面的URL，如果改变这个属性，浏览器会访问新的URLstatus　　包含将在浏览器状态去显示的一个串。一般在浏览器左下角onload：　　包含了需要在页面完全加载后调用的函数document：　　包含DOMalert方法：　　显示一个提醒...

js使用Promise实现简单的Ajax缓存

业务场景在不少业务场景下，我们需要实现简单的请求缓存(即某个请求只发起一次请求)，例如上传 Token 的获取、获取配置的接口等。这些接口可以通过 Promise 实现简单的缓存并能够控制更新，而不需要另外引入缓存层。示范代码用七牛上传作例子，一般我们会把七牛上传封装为一个单独的 Upload 组件，外部只需要调用组件，而 token 的获取封装到组件内部实现。 //Upload.vue let fetchToken = null; export default {data() {return...

javascript-Request-Promise：不要承诺缓存结果【代码】

我正在使用Request-Promise(请参见下面的代码). 问题：如果我缓存了一个诺言,它会缓存结果还是每次都问一个新的诺言？例：var cachedPromise = getTokenPromise(); cachedPromise.then(function(authorizationToken1) {//... }); cachedPromise.then(function(authorizationToken2) {//... }); //QUESTION: Is right that authorizationToken1 equals authorizationToken2getTokenPromise()函数：var querystring = require('quer...

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

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

javascript – 在promise解析后修改组件状态【代码】

我希望在解析promise之后修改组件的状态(本机反应). 这是我的代码：class Greeting extends Component{constructor(props){super(props);this.state = {text: 'Starting...'};var handler = new RequestHandler();handler.login('email','password').then(function(resp){this.setState({text:resp});});}render(){return (<Text style={this.props.style}>Resp: {this.state.text}</Text>);} }但是当promise解决时,它会抛出以下错...

js利用递归与promise 按顺序请求数据的方法【图】

问题：项目中有一个需求，一个tabBar下面如果没有内容就不让该tabBar显示，当然至于有没有内容，需要我们通过请求的来判断，但是由于请求是异步的，如何让请求按照tabBar的顺序进行？方案：我们可以将promise变成下一个请求，可以利用递归来实现实施： //定义初始数据 requestlist就像tabBar列表let requestlist = [1, 2, 3, 4, 5, 6, 7,8,9];//每个tabBar的返回数据使用reslist装起来let reslist = [];function startapi() {//定...

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

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

首页 / JAVASCRIPT / JavaScript Promise 用法

JavaScript Promise 用法

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript Promise 用法】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

PROMISE - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程