js的异步笔记

异步

疑问

JS是单线程的,异步不应该是多线程的吗?

异步不一定是多线程的,但一定是非堵塞的.多线程只是异步的一种实现方式.

为什么需要异步编程?

防止异步内容堵塞同步的内容.

比如,你使用ajax向服务器请求数据,极端假设服务器需要10min才能返回给你数据.假设不使用异步,那么这将是堵塞的.

JS如何实现异步的?

JS会把异步放入消息队列(优先级相同的情况下,先进先出),当同步执行完成之后,会取消息队列的内容.

所以执行顺序可以理解为:同步优先、异步靠边、回调垫底

JS的异步有哪些?

setTimeout()异步函数

Promise对象类型的函数,比如async/await,fetch()等

Promise

意义

支持异步编程

状态

Promise(期约)共有三个状态:

pending(待定))
fulfilled(兑现)
reject(拒绝)

Promise初始状态为pending,当变为fulfilled或者reject时,状态将会被冻结,即无法改变.可以看作一次性用品.

方法

then(callback)
catch(callback)

callback表示回调函数

then()与catch()返回的仍为Promise

该返回的Promise会封装then()和catch()回调函数的返回值(如果无返值则封装undefined)

let promise = new Promise(
    (resolve, reject) => {
        resolve('promise');
    }
)

let pt = promise.then((data) => {console.log(data);});

// 考虑到异步的执行顺序,这里使用setTimeout,保证then()异步先完成
setTimeout(() => console.log(pt), 0)
// output: Promise { undefined }

因此你可以promiseObj.then(callback).then(callback).catch(callback).then(callback).catch(callback)...then()与catch()方法交叉使用,这种链式调用被称作复合(composition).

在then()与catch()组成的方法链中,当前方法的回调方法的参数为当前方法的Promise对象所封装的内容,所以就可以避免了臭名昭著的回调地狱.

方法与状态的关系

then()对应fulfilled,catch()对应reject.

当上一个promise的状态为fulfilled时,将执行下一个then().

当上一个promise的状态为reject时,将执行下一个catch().

Promise的fulfilled与reject规则

Promise对象可以在executor中设置

let promise = new Promise(
    (resolve, reject) => {
        // You can set resolve or reject
        // Once you set one of them, it will not change again
        resolve('fulfilled');
    }
)

then()或者catch()返回的Promise状态:

摘录MDN

返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
没有返回任何值，那么 then 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 undefined。
抛出一个错误，那么 then 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。
返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

async/await

async修饰的函数如果不存在await,那他将是同步的.

同样,async修饰的函数返回值会被封装为Promise对象.

举例:

async function test(){
    return "I am returned";
}
console.log(test()) // Promise { 'I am returned' }

await一般用来修饰异步(可以修饰同步,但没什么用)

当await修饰异步之后,那么await后面的操作将作为异步放到await修饰的异步的队列之后.

await修饰的异步返回值不再是Promise对象,而是Promise对象所包含的内容.

举个例子

let p = new Promise(
    (resolve,reject) => {
        resolve('fulfilled');
    }
)

async function test() {
    const a = await p;
    console.log(a);
}

test();

// fulfilled

setTimeout

这个异步有点特殊,他依靠时钟,不返回promise,依旧在消息队列,但优先级低于promise.