JavaScript專項演算法題(6):Promises

冒泡的馬樹 發表於 2022-05-06
演算法 JavaScript

@冒泡的馬樹

題庫原地址:http://csbin.io/promises

Promises期約

挑戰1

問題:

讓我們從複習非同步函式開始吧!使用setTimeout,在1000ms後列印字串“Hello!”。

題解:

// Challenge 1

function sayHello() {
  // ADD CODE HERE
  setTimeout(() => console.log('Hello!'), 1000)
}

// Uncomment the line below when ready
sayHello(); // should log "Hello" after 1000ms

挑戰2

問題:

建立一個promise。延遲1000ms後在resolve裡面傳入值“Resolved!”,使用setTimeout。在promise被呼叫resolve後,列印它的內容,藉助傳入console.log到.then中來實現。

題解:

// Challenge 2
var promise = new Promise(function (resolve, reject) {
  // ADD CODE HERE
  setTimeout(() => resolve('Resolved'), 1000)
});

// Should print out "Resolved!"
// ADD CODE HERE
promise.then(res => console.log(res))

挑戰3

問題:

建立另外一個promise。這次不使用setTimeout,在reject裡面傳入值“Rejected!”。在promise被呼叫reject之後,列印它的內容,藉助傳入console.log到.catch來實現。

題解:

// Challenge 3

promise = new Promise(function(resolve, reject) {
  // ADD CODE HERE
  reject('Rejected')
})

// Should print out "Reject!"
// ADD CODE HERE
promise.catch(res => console.log(res))

挑戰4

問題:

Promises期約是非同步的。現在讓我們來證明它們確實如此!建立一個promise,在resolve裡面傳入值“Promise has been resolved!”,然後去掉挑戰4底部的註釋。執行後我們看到的列印順序是怎樣的?“Promise has been resolved!”先還是"I'm not the promise!"先?為什麼?

題解:

// Challenge 4

promise = new Promise(function (resolve, reject) {
  // ADD CODE HERE
  resolve()
});

// Uncomment the lines below when ready
promise.then(() => console.log('Promise has been resolved!'));
console.log("I'm not the promise!");

挑戰5

問題:

編寫delay函式,用於返回一個promise。此返回promise應該返回一個在1000ms後呼叫resolve的setTimeout。

題解:

// Challenge 5
function delay(){
    return new Promise(function (resolve, reject) {
        return setTimeout(resolve, 1000)
  })
}

// Uncomment the code below to test
// This code should log "Hello" after 1000ms
delay().then(sayHello);

挑戰6

問題:

在這個挑戰中我們會使用.then鏈式呼叫promises期約。建立兩個變數:firstPromise和secondPromise,讓secondPromise成為一個在resolve中傳值“Second!”的promise,firstPromise則在resolve中傳入secondPromise。用.then的方式呼叫firstPromise,這會返回secondPromise,然後在它的resolve執行之後,列印對應promise的內容,藉助傳入console.log到.then來實現。

題解:

// Challenge 6
//
// ADD CODE BELOW
var secondPromise = Promise.resolve('Second!')
var firstPromise = new Promise(function (resolve, reject) {
  resolve(secondPromise)
})
firstPromise.then().then(res => console.log(res))

挑戰7

問題:

我們有一個會從資料庫拉取資料的API,它接收一個下標引數然後返回一個promise。你的挑戰是使用promise.all發起3次API呼叫,然後在呼叫都結束後返回對應的資料。

題解:


// Challenge 7
const 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);
  return new Promise((resolve, reject) => {
    if (i >= 0 && i < fakePeople.length) {
      setTimeout(() => resolve(fakePeople[i]), returnTime);
    } else {
      reject({ message: "index out of range" });
    }
  });
};

function getAllData() {
  // CODE GOES HERE
  return Promise.all([fakeAPICall(0), fakeAPICall(1), fakeAPICall(2)])
}

getAllData().then(res => console.log(res))

35kingCrab