作者：酸菜牛肉 文章內(nèi)容輸出來源：拉勾教育大前端高薪訓(xùn)練營課程

內(nèi)容概要 ###：

1. 同步模式與異步模式
2. 時間循環(huán)與消息隊列
3. 異步編程的幾種方式
4. Promise 異步編程凰兑、宏任務(wù)/微任務(wù)隊列
5. Generator 異步方案芋哭、Async/Await語法糖

一 永部、同步模式與異步模式

異步模式

回調(diào)函數(shù)： 由調(diào)用者定義映企， 由執(zhí)行者執(zhí)行

function foo (callback){
  setTimeout(function(){
    callback()
  }, 3000)
}
foo(function(){
  console.log('這個一個回調(diào)函數(shù)');
  console.log('由調(diào)用者定義狰右， 由執(zhí)行者執(zhí)行');
  console.log('其實就是調(diào)用者告訴執(zhí)行者異步任務(wù)結(jié)束之后應(yīng)該做什么'）
})

Promise

Promise概念

const promise = new Promise((resolve, reject) => {
    resolve(100);
    // reject(new Error("promise rejected"));
})

promise.then((data)=> {
    console.log(data);
}, (error) => {
    console.log(error)
})
console.log("end")

• Promise 對象的then方法會返回一個全新的Promise對象
• 后面的then方法就是在為上一個then返回的promise注冊回調(diào)
• 前邊then方法中回調(diào)函數(shù)的返回值會作為后面then方法回調(diào)的參數(shù)
• 如果回調(diào)中返會的是Promise，那后邊then方法的回調(diào)會等待他的結(jié)束

  Promise的串行與并行

const ajax = (url) => {
    return new Promise((resolve, reject)=>{
        if(url.startsWith('api')){
        
            resolve(1000);
        }else{
            reject(new Error('url api is error'))
        }
        
    })
}
//并行執(zhí)行
const promise = Promise.all([
    ajax('api'),
    ajax('api')
])

//串行執(zhí)行
//ajax('api').then(data=>{
//  const urls = Object.values(data)
//  const tasks = urls.map(url => ajax(url))
//  return new Promise.all(tasks);
//}).then(values=>{
//  console.log(values)
//})

promise.then(data=>{
    console.log(data);
}).catch(error=>{
    console.log(error)
})

Promise.all()等待所有promise的任務(wù)同時執(zhí)行完成會返回一個新的Promise的對象
Promise.rece()等待第一個promise的任務(wù)執(zhí)行完成返回一個新的Promise的對象

作者：酸菜牛肉 文章內(nèi)容輸出來源：拉勾教育大前端高薪訓(xùn)練營課程