JS重点：异步编程

一、异步的引出介绍

本篇文章我会从简单明了的角度来讲解基础的异步编程。

众所周知js是一门单线程非阻塞的语言，在编程中我们需要进行一个需要等待的任务时（如延时器函数，后端调用接口），往往不能立即获取数据，想获取到数据我们需要利用js中的异步处理，其中处理异步任务的方式下面列举三种：

1. callback（回调函数）
2. Promise
3. Async/Await

二、不调用异步的情况

为了更加直观的展示异步编程的作用，我们先来编写一个简单的例子：

const func = () => {
    let data
    setTimeout(()=>{
        data = "结果"
    },3000)
    console.log(data); //undefined
}

我们用一个延时器来模拟后端返回数据的情况，并且在三秒后将结果赋值。此时函数顺序执行，只有在三秒后（后端返回数据）才能拿到我们想要的数据，因此执行时的data为我们尚未初始化的默认值undefined。

三、callback

callback是较为原始的方法，通过将回调函数作为函数的传参来解决异步问题，直接展示代码

const getData = (callback) => {
    setTimeout(() => {
        callback("结果")
    }, 1000);
}

getData((res)=>{
    console.log(res); //结果
})

使用了setTimeout函数来模拟一个异步请求，我们将结果存放到一个回调函数中，为其传入一个值，再给回调函数传入一个值，此为我们所需要的值。在调用函数的时候我们也传入一个回调，来拿取到结果。它会在指定的时间后将回调函数放入任务队列中，而不会阻塞程序的执行。当任务队列中的任务被执行时，回调函数才会被调用，这样就实现了异步执行的效果。

四、Promise

Promise是ES6中新增的语法，也是处理异步任务的时候使用较多的语法，Promise有三种状态，分别是pending,resolve和reject，其中pending会分别在成功和失败的情况下转换为后两者。

const getData = () => {
    return new Promise((resolve,reject)=>{
        // Promise同时只能存在一种状态，因此拿失败举例
        // resolve("成功结果")
        setTimeout(()=>{
            reject("失败结果")
        },1000)
    })
}

getData().then(res=>{
    console.log(res); // 成功结果
}).catch(res=>{
    console.log(res); // 失败结果
})

此外，Promise还有一种使用方法：Promise all常用于页面进来之后执行多个异步请求的情况，其中.then会返回一个Promise数组，而.catch会捕获到最近的一个错误。

const p1 = ()=>{
    setTimeout(()=>{
        resolve("结果1")
    })
}

const p2 = ()=>{
    setTimeout(()=>{
        reject("结果2")
    })
}

const p3 = ()=>{
    setTimeout(()=>{
        resolve("结果3")
    })
}

Promise.all([p1,p2,p3]).then(res=>{
    // 返回所有结果的数组
    console.log(res);
}).catch(err=>{
    // 返回最近的错误
})

五、async/await

这个方法是我最常用的方法，语法简单易操作，也是另一种常用的解决异步的方法，其也会配合一个Promise构造函数使用，其中，async可以单独使用，返回结果为promise，但是await必须要使用在async所包裹的函数之中。

const fun = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("成功结果")
        }, 1000)
    })
}

const getData = async () => {
    const res = await fun()
    console.log(res);
}

getData()

由此我们很容易的得到了异步任务的结果。

---

总结：

• 使用回调函数(callback)可以处理异步任务，将回调函数作为参数传入函数中，等待异步任务完成后调用回调函数，并将结果传入回调函数中。

• 通过创建Promise对象来处理异步任务，Promise对象有三种状态(pending, resolve, reject)，在异步任务完成后通过resolve或reject来改变Promise的状态，并通过.then和.catch来处理成功和失败的情况。

• async/await是一种基于Promise的异步编程方式，async函数返回一个Promise对象，await关键字用于等待一个Promise对象的状态变为resolve，并返回结果。通过async/await可以让异步代码看起来像同步代码，提高代码的可读性和可维护性。