JS异步

并发&并行

并发是宏观概念，我分别有任务 A 和任务 B，在一段时间内通过任务间的切换完成了这两个任务，这种情况就可以称之为并发。

并行是微观概念，假设 CPU 中存在两个核心，那么我就可以同时完成任务 A、B。同时完成多个任务的情况就可以称之为并行

Promise

Promise是在ES6中确定的对异步及回调处理的规范实现

一个 Promise 必然处于以下几种状态之一：

待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
已兑现（fulfilled）: 意味着操作成功完成。
已拒绝（rejected）: 意味着操作失败。

使用Promise封装ajax

关键：return new Promise((resolve, reject)=>{...}) 用以返回一个Promise对象。

ajax = (method, url) => {
    return new Promise((resolve, reject)=>{ //关键，用以返回一个Promise对象
        var request = new XMLHttpRequest() 
        request.open(method, url)
        request.onreadystateChange = function(
            if(request.readyState === 4){
                console.log('请求完成')
                if(request.responese.status === 200){
                    console.log('请求成功')
                    resolve.call(null, request.response) //成功则调用resolve
                }else{
                    console.log('请求失败')
                    reject.call(null, request) //失败则调用reject
                }
            }
        )
        request.send()
    })
}

一个Promise对象具有then函数，then函数接受两个函数，第一个函数当 Promise 变成接受状态（fulfilled）时被调用，第二个函数当 Promise 变成拒绝状态（rejected）时被调用。

catch 接收一个函数，在Promise被reject的时候执行，除非该函数抛出错误或返回一个失败的Promise，否则返回的Promise一直是resolved。实质上catch(failureCallback) 是 then(null, failureCallback) 的缩略形式。

finally接收一个回调函数，在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定该回调函数。这避免了同样的语句需要在then()和catch()中各写一次的情况。

ajax('GET','/user')
.then(
    res=> console.log(res),
    request => console.log(request)
)
.catch(err => console.log(err))
.finally( () => console.log('结束') )

async和await

async和await都是JavaScript中用于处理异步操作的关键字。

async关键字用于声明一个函数是异步函数。异步函数在执行过程中可以暂停，并且可以在某些操作完成之后恢复执行。它们返回一个Promise对象，可以通过await关键字来等待该Promise对象的解决（即完成）。

而await关键字只能在异步函数内部使用。它可以放在一个返回Promise对象的表达式前面，暂停异步函数的执行，直到该Promise对象解决为止。在等待期间，JavaScript引擎可以继续执行其他任务，以避免阻塞线程。一旦Promise对象解决，await表达式会返回解决的值，并且异步函数会继续执行。

以下是async和await的简单用法：

async function fetchData() { try { const response = await fetch(‘https://api.example.com/data‘); const data = await response.json(); console.log(data); } catch (error) { console.log(‘Error:’, error); }}fetchData();