JavaScript Promise API

The JavaScript Promise API is awesome but can be made amazing with

async

await

JavaScript Promise API很棒，但是可以通过

async

await

While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world, with many new APIs being implemented with the promise philosophy. Let's take a look at promises, the API, how it's used!

尽管同步代码更易于跟踪和调试，但异步通常在性能和灵活性方面更好。 当您一次触发多个请求，然后在每个请求准备就绪时处理它们时，为什么要“暂停显示”呢？ 承诺正在成为JavaScript世界的重要组成部分，许多新API都以promise理念实现。 让我们来看看Promise，API及其用法！

在野外的应许 (Promises in the Wild)

The XMLHttpRequest API is async but does not use the Promises API.  There are a few native APIs that now use promises, however:

当XMLHttpRequest API是异步，但不使用承诺API。 但是，现在有一些本机API使用Promise：

• Battery API

  电池API

• fetch API (XHR's replacement)

  提取API (XHR的替代品)

• ServiceWorker API (post coming soon!)
  ServiceWorker API(即将发布帖子！)

Promises will only become more prevalent so it's important that all front-end developers get used to them.  It's also worth noting that Node.js is another platform for Promises (obviously, as Promise is a core language feature).

承诺只会变得更加普遍，因此所有前端开发人员都必须习惯它们，这一点很重要。 还值得注意的是，Node.js是Promises的另一个平台(显然，Promise是核心语言功能)。

Testing promises is probably easier than you think because

setTimeout

测试Promise可能比您想象的要容易，因为

setTimeout

基本承诺用法 (Basic Promise Usage)

The

new Promise()

setTimeout

XMLHttpRequest

new

resolve

reject

new Promise()

setTimeout

XMLHttpRequest

new

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(result) {
/* do something with the result */
}).catch(function() {
/* error :( */
}).finally(function() {
/* executes regardless or success for failure */
});

It's up to the developer to manually call

resolve

reject

开发人员可以根据他们给定任务的结果，在回调函数体中手动调用“

resolve

reject

// 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);
});

Sometimes you don't need to complete an async tasks within the promise -- if it's possible that an async action will be taken, however, returning a promise will be best so that you can always count on a promise coming out of a given function. In that case you can simply call

Promise.resolve()

Promise.reject()

new

有时候，你并不需要完成的承诺中异步任务-如果它可能是一个异步将采取行动，然而，返回承诺将最好的，让您可以随时在承诺未来数给定函数的出。 在这种情况下，您可以简单地调用

Promise.resolve()

Promise.reject()

new

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);
});
}

Since a promise is always returned, you can always use the

then

catch

由于总是返回承诺，因此您可以始终使用

then

catch

然后 (then)

All promise instances get a

then

then

resolve()

所有的Promise实例都有一个

then

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

The

then

then

解决承诺后，将触发

then

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

Each

then

then

每个

then

then

If a promise has already resolved but

then

then

如果一个承诺已经解决，但

then

then

抓住 (catch)

The

catch

当承诺被拒绝时，执行

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!'

What you provide to the

reject

Error

catch

您提供给

reject

Error

catch

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

最后 (finally)

The newly introduced

finally

无论成功与否，都会调用新引入的

finally

(new Promise((resolve, reject) => { reject("Nope"); }))
.then(() => { console.log("success") })
.catch(() => { console.log("fail") })
.finally(res => { console.log("finally") });

// >> fail
// >> finally

Promise.all

(

Promise.all

)

Think about JavaScript loaders:  there are times when you trigger multiple async interactions but only want to respond when all of them are completed -- that's where

Promise.all

Promise.all

想想JavaScript加载程序：有时候您会触发多个异步交互，但只想在所有异步交互完成后才进行响应-这就是

Promise.all

Promise.all

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

A perfect way of thinking about

Promise.all

fetch

考虑

Promise.all

fetch

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

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

You could combine APIs like

fetch

您可以结合使用

fetch

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

Dealing with rejection is, of course, hard. If any promise is rejected the

catch

当然，处理拒绝是很难的。 如果任何承诺被拒绝，则第一个拒绝的

catch

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: ', results);
}).catch(function(err) {
console.log('Catch: ', err);
});

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

Promise.all

随着越来越多的API向

Promise.all

Promise.race

(

Promise.race

)

Promise.race

Promise.race

Promise.race

Promise.race

Promise.race

Promise.race

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!

A use case could be triggering a request to a primary source and a secondary source (in case the primary or secondary are unavailable).

用例可能会触发对主要来源和次要来源的请求(如果主要来源或次要来源不可用)。

习惯承诺 (Get Used to Promises)

Promises have been a hot topic for the past few years (or the last 10 years if you were a Dojo Toolkit user) and they've gone from a JavaScript framework pattern to a language staple.  It's probably wise to assume you'll be seeing most new JavaScript APIs being implemented with a promise-based pattern...

在过去的几年中(或者，如果您是Dojo Toolkit用户，则是过去的十年)，承诺一直是一个热门话题，并且它们已经从JavaScript框架模式变成了语言的主要内容。 假设您将看到大多数新JavaScript API正在使用基于承诺的模式来实现，这可能是明智的……

...and that's a great thing!  Developers are able to avoid callback hell and async interactions can be passed around like any other variable.  Promises take some time getting used to be the tools are (natively) there and now is the time to learn them!

...那真是太好了！ 开发人员可以避免回调地狱，并且可以像其他任何变量一样传递异步交互。 承诺要花一些时间才能习惯这些工具(本地)，现在是时候学习它们了！

翻译自: https://davidwalsh.name/promises