Promise 物件

[gracekrcx]

Description

1. A Promise is a proxy for a value not necessarily known when the promise is created. Promise 物件代表一個即將完成、或失敗的非同步操作，以及它所產生的值。 （1）promise 跟非同步操作的『成功』or『失敗』有關，跟 fetch api 不一定有關係
2. 解決 callback function 沒有一套規則與容易產生 callback hell 的問題
3. promise 和 callback 有關，fetch 和 XMLHttpRequest 有關
4. !! ⛑ myFirstPromise 會收到一個 promise object 回傳值

let myFirstPromise = new Promise((resolve, reject) => {
 // 宣告一個 Promise 並定義這個非同步（包裝這個非同步）
 // myFirstPromise 會收到一個 promise object 回傳值
 // 在 new Promise 裡判斷『成功』或是『失敗』，then() 或是 catch() 只是接收端

  setTimeout( function() {
   if (/* everything turned out fine */) {
    resolve("Stuff worked!"); // 成功時
   } else {
    reject(Error("It broke")); // 失敗時
   }
  }, 250) 
}) 

function 包裝一個非同步

const get = function(url){
 return new Promise ((resolve, reject)=>{
  const request = new XMLHttpRequest()
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
       resolve(request.resposeText)
    }
  };
  request.onerror = err => {
   reject(err) 
  }
  request.send();
 })
}

get('https://jsonplaceholder.typicode.com/todos/1').then(result =>{
 console.log(result) 
}).catch(err => {
 console.log('err',err) 
})

如果是用 cb() 會沒有一個規則，所以回傳一個 Promise 會是比較好的方法在處理非同步時 有 callback function 的地方都改成 Promise (誤XD)

function get(cb){
 ...
 cb(result, err)
}

function get(){
 ...
 return new Promise((resolve, reject) => {...
}

get().then(result => ....)

Static methods

Promise.all(iterable) Promise.race(iterable) Promise.reject(reason) Promise.resolve(value)

Instance methods

Promise.prototype.catch() Promise.prototype.then() Promise.prototype.finally()

參考文件

JavaScript Promises: An introduction JavaScript Promise 全介紹

[gracekrcx]

promise 範例

// promise1 會得到一個 [object Promise]
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

p1.then((value) => {
  console.log(value);
  // expected output: "foo"
});

console.log(p1);

[gracekrcx]

function 包一個 promise

const get = function(){
    return new Promise((resolve, reject)=>{
        ...
    })
}

get().then()