# Super Junior's Club Day8

---

# Promise

Promise 有 2 個特點
1. 對象的狀態不受外界影響。 Promise對象代表一個非同步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有非同步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。

---

3. 一旦狀態改變，就不會再變，任何時候都可以得到這個結果。 Promise對象的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果

---

# 基本用法

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 非同步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

---

Promise 新建后就会立即执行

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// 請問輸出順序為 ??

---

注意，resolve或reject並不會终结 Promise 的参数函数的執行。

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

---

# 問題 1

---

# Promise.prototype.then()

###### then方法返回的是一個新的Promise實例（注意，不是原來那個Promise實例）。因此可以採用鍊式寫法，即then方法後面再調用另一個then方法。

---

###### 採用鍊式的then，可以指定一組按照次序調用的回調函數。這時，前一個回調函數，有可能返回的還是一個Promise對象（即有非同步操作），這時後一個回調函數，就會等待該Promise對象的狀態發生變化，才會被調用。

---

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function (comments) {
  console.log("resolved: ", comments);
}, function (err){
  console.log("rejected: ", err);
});

---

### 解釋
## 以 fetch 舉例

---

# Promise.prototype.catch()
Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的別名，用於指定發生錯誤時的回調函數。

---

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

getJSON()方法返回一個 Promise 對象，如果該對象狀態變為resolved，則會調用then()方法指定的回調函數；如果異步操作拋出錯誤，狀態就會變為rejected，就會調用catch()方法指定的回調函數，處理這個錯誤。另外，then()方法指定的回調函數，如果運行中拋出錯誤，也會被catch()方法捕獲。

---

如果 Promise 狀態已經變成resolved，再拋出錯誤是無效的。

const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

---

Promise 對象的錯誤具有“冒泡”性質，會一直向後傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個catch語句捕獲。

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

---

catch()方法之中，還能再拋出錯誤。

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  return someOtherAsyncThing();
}).catch(function(error) {
  console.log('oh no', error);
  // 下面一行会报错，因为 y 没有声明
  y + 2;
}).then(function() {
  console.log('carry on');
});
// oh no [ReferenceError: x is not defined]

---

上面代碼中，catch()方法拋出一個錯誤，因為後面沒有別的catch()方法了，導致這個錯誤不會被捕獲，也不會傳遞到外層。如果改寫一下，結果就不一樣了。

someAsyncThing().then(function() {
  return someOtherAsyncThing();
}).catch(function(error) {
  console.log('oh no', error);
  // 下面一行会报错，因为y没有声明
  y + 2;
}).catch(function(error) {
  console.log('carry on', error);
});
// oh no [ReferenceError: x is not defined]
// carry on [ReferenceError: y is not defined]

---

補充:

[ Macrotask 與 MicroTask](https://ithelp.ithome.com.tw/articles/10222737)