Promises期约
挑战1
问题:
让我们从复习异步函数开始吧!使用setTimeout,在1000ms后打印字符串“Hello!”。
题解:
123456789 |
// Challenge 1functionsayHello() {// ADD CODE HERE setTimeout(() =>console.log('Hello!'), 1000)}// Uncomment the line below when readysayHello(); // should log "Hello" after 1000ms |
挑战2
问题:
创建一个promise。延迟1000ms后在resolve里面传入值“Resolved!”,使用setTimeout。在promise被调用resolve后,打印它的内容,借助传入console.log到.then中来实现。
题解:
123456789 |
// Challenge 2var promise = newPromise(function (resolve, reject) {// ADD CODE HERE setTimeout(() => resolve('Resolved'), 1000)});// Should print out "Resolved!"// ADD CODE HEREpromise.then(res =>console.log(res)) |
挑战3
问题:
创建另外一个promise。这次不使用setTimeout,在reject里面传入值“Rejected!”。在promise被调用reject之后,打印它的内容,借助传入console.log到.catch来实现。
题解:
12345678910 |
// Challenge 3promise = newPromise(function(resolve, reject) {// ADD CODE HERE reject('Rejected')})// Should print out "Reject!"// ADD CODE HEREpromise.catch(res =>console.log(res)) |
挑战4
问题:
Promises期约是异步的。现在让我们来证明它们确实如此!创建一个promise,在resolve里面传入值“Promise has been resolved!”,然后去掉挑战4底部的注释。运行后我们看到的打印顺序是怎样的?“Promise has been resolved!”先还是”I’m not the promise!”先?为什么?
题解:
12345678910 |
// Challenge 4promise = newPromise(function (resolve, reject) {// ADD CODE HERE resolve()});// Uncomment the lines below when readypromise.then(() =>console.log('Promise has been resolved!'));console.log("I'm not the promise!"); |
挑战5
问题:
编写delay函数,用于返回一个promise。此返回promise应该返回一个在1000ms后调用resolve的setTimeout。
题解:
123456789 |
// Challenge 5functiondelay(){returnnewPromise(function (resolve, reject) {return setTimeout(resolve, 1000) })}// Uncomment the code below to test// This code should log "Hello" after 1000msdelay().then(sayHello); |
挑战6
问题:
在这个挑战中我们会使用.then链式调用promises期约。创建两个变量:firstPromise和secondPromise,让secondPromise成为一个在resolve中传值“Second!”的promise,firstPromise则在resolve中传入secondPromise。用.then的方式调用firstPromise,这会返回secondPromise,然后在它的resolve执行之后,打印对应promise的内容,借助传入console.log到.then来实现。
题解:
12345678 |
// Challenge 6//// ADD CODE BELOWvar secondPromise = Promise.resolve('Second!')var firstPromise = newPromise(function (resolve, reject) { resolve(secondPromise)})firstPromise.then().then(res =>console.log(res)) |
挑战7
问题:
我们有一个会从数据库拉取数据的API,它接收一个下标参数然后返回一个promise。你的挑战是使用promise.all发起3次API调用,然后在调用都结束后返回对应的数据。
题解:
12345678910111213141516171819202122232425 |
// Challenge 7const fakePeople = [ { name: 'Rudolph', hasPets: false, currentTemp: 98.6 }, { name: 'Zebulon', hasPets: true, currentTemp: 22.6 }, { name: 'Harold', hasPets: true, currentTemp: 98.3 },]const fakeAPICall = (i) => {const returnTime = Math.floor(Math.random() * 1000);returnnewPromise((resolve, reject) => {if (i >= 0 && i < fakePeople.length) { setTimeout(() => resolve(fakePeople[i]), returnTime); } else { reject({ message: "index out of range" }); } });};functiongetAllData() {// CODE GOES HEREreturnPromise.all([fakeAPICall(0), fakeAPICall(1), fakeAPICall(2)])}getAllData().then(res =>console.log(res)) |