javaScript异步编程

作者：酸菜牛肉 文章内容输出来源：拉勾教育大前端高薪训练营课程

内容概要 ###：

1. 同步模式与异步模式
2. 时间循环与消息队列
3. 异步编程的几种方式
4. Promise 异步编程、宏任务/微任务队列
5. Generator 异步方案、Async/Await语法糖

一 、同步模式与异步模式

异步模式

回调函数： 由调用者定义， 由执行者执行

function foo (callback){
  setTimeout(function(){
    callback()
  }, 3000)
}
foo(function(){
  console.log('这个一个回调函数');
  console.log('由调用者定义， 由执行者执行');
  console.log('其实就是调用者告诉执行者异步任务结束之后应该做什么'）
})

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注册回调
• 前边then方法中回调函数的返回值会作为后面then方法回调的参数
• 如果回调中返会的是Promise，那后边then方法的回调会等待他的结束

  Promise的串行与并行

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

//串行执行
//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的任务同时执行完成会返回一个新的Promise的对象
Promise.rece()等待第一个promise的任务执行完成返回一个新的Promise的对象

作者：酸菜牛肉 文章内容输出来源：拉勾教育大前端高薪训练营课程