1. 程式人生 > 實用技巧 >Umi巢狀路由 - 登入邏輯統一處理

Umi巢狀路由 - 登入邏輯統一處理

用途:

  • 規範回撥的名字或順序
  • 拒絕回撥地獄,讓程式碼可讀性更強
  • 很方便的捕獲錯誤

如何建立一個 new Promise

return new Promise(
(resolve,reject)=>{
}
)
  • 其他內容全放在{}裡
  • 非同步任務成功就是呼叫resolve回撥函式(以結果為引數),失敗就是呼叫reject回撥函式(以結果為引數)

如何使用 Promise.prototype.then

Promise 例項的then方法,用來添加回調函式。
then方法可以接受兩個回撥函式,第一個是非同步操作成功時(變為fulfilled狀態)時的回撥函式,第二個是非同步操作失敗(變為rejected)時的回撥函式(該引數可以省略)。一旦狀態改變,就呼叫相應的回撥函式。

var p1 = new Promise(function (resolve, reject) {
  resolve('成功');
});
p1.then(console.log, console.error);
// "成功"

var p2 = new Promise(function (resolve, reject) {
  reject(new Error('失敗'));
});
p2.then(console.log, console.error);
// Error: 失敗

then方法可以鏈式使用。

p1
  .then(step1)
  .then(step2)
  .then(step3)
  .then(
    console.log,
    console.error
  );

上面程式碼中,p1後面有四個then,意味依次有四個回撥函式。只要前一步的狀態變為fulfilled,就會依次執行緊跟在後面的回撥函式。
最後一個then方法,回撥函式是console.logconsole.error,用法上有一點重要的區別。console.log只顯示step3的返回值,而console.error可以顯示p1step1step2step3之中任意一個發生的錯誤。舉例來說,如果step1的狀態變為rejected,那麼step2step3都不會執行了(因為它們是resolved的回撥函式)。Promise 開始尋找,接下來第一個為rejected的回撥函式,在上面程式碼中是console.error

。這就是說,Promise 物件的報錯具有傳遞性。
Promise 的用法,簡單說就是一句話:使用then方法添加回調函式。

如何使用 Promise.all

**Promise.all(iterable)** 方法返回一個 Promise 例項,此例項在 iterable 引數內所有的 promise 都“完成(resolved)”或引數中不包含 promise 時回撥完成(resolve);如果引數中  promise 有一個失敗(rejected),此例項回撥失敗(reject),失敗的原因是第一個失敗 promise 的結果。
它通常在啟動多個非同步任務併發執行併為其結果建立承諾之後使用,以便人們可以等待所有任務完成。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

如何使用 Promise.race

**Promise.race(iterable) **方法返回一個 promise,一旦迭代器中的某個promise解決或拒絕,返回的 promise就會解決或拒絕。

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// expected output: "two"

要點0:
Promise 用於避免回撥地域,讓程式碼看起來更同步
要點1:

function fn(){
    return new Promise((resolve, reject)=>{
        成功時呼叫 resolve(data)
        失敗時呼叫 reject(reason)
    })
}

要點2:
const promise1 = fn() // 得到 promise1 物件
fn().then(success, fail).then(success2, fail2).catch(fail3)
或者
promise1.then(success, fail).then(success2, fail2).catch(fail3)
均可
要點3:
Promise.all([promise1, promise2])並行,等待所有 promise 成功。
如果都成功了,則 all 對應的 promise 也成功;如果有一個失敗了,則 all 對應的 promise 失敗。
要點4:
Promise.race([promise1, promise2]),返回一個 promise,一旦陣列中的某個promise解決或拒絕,返回的 promise就會解決或拒絕。