JavaScript

Callback hell 處理(jQuery,Promise, async/await)

在某家壽險業解過這類似的鬼東西，整理一下解釋。

如圖:
** 示意圖 **
Callback hell

-必須兼容IE處理方式:

  • jQuery 的方式處理
1
2
3
4
$.ajax({參數})
.then(callback_A)
.then(callback_B)
.then(callback_C)

適合解法

1
2
3
4
5
6
7
8
9
10
11
12
13
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

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

console.log(promise1);
// expected output: [object Promise]
  • async/await (ES7的語法)，可與Promise混合使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
async function a(){
  await b();
  .....       // 等 b() 完成後才會執行
  await c();
  .....       // 等 c() 完成後才會執行
  await new Promise(resolve=>{
    .....
  });
  .....       // 上方的 promise 完成後才會執行
}
a();
a().then(()=>{
  .....       // 等 a() 完成後接著執行
});

參考: Promise MDN文件
參考: async MDN文件
參考: await MDN文件
參考: 簡單理解 JavaScript Async 和 Await