JS 异步接口调用介绍

news2024/10/6 12:36:01

JS 异步接口调用介绍

Js 单线程模型

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这样设计的方案主要源于其语言特性，因为 JavaScript 是浏览器脚本语言，它可以操纵 DOM ，可以渲染动画，可以与用户进行互动，如果是多线程的话，执行顺序无法预知，而且操作以哪个线程为准也是个难题。

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

在 HTML5 时代，浏览器为了充分发挥 CPU 性能优势，允许 JavaScript 创建多个线程，但是即使能额外创建线程，这些子线程仍然是受到主线程控制，而且不得操作 DOM，类似于开辟一个线程来运算复杂性任务，运算好了通知主线程运算完毕，结果给你，这类似于异步的处理方式，所以本质上并没有改变 JavaScript 单线程的本质。

任务队列

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。

所以，当在执行过程中遇到一些类似于 setTimeout 等异步操作的时候，会交给浏览器的其他模块进行处理，当到达 setTimeout 指定的延时执行的时间之后，回调函数会放入到任务队列之中。

当然，一般不同的异步任务的回调函数会放入不同的任务队列之中。等到调用栈中所有任务执行完毕之后，接着去执行任务队列之中的回调函数

JavaScript
setTimeout(() => {
    console.log('setTimeout')
}, 22)//定时22ms，后执行setTimeout
for (let i = 0; i++ < 2;) {
    i === 1 && console.log('1')
}
setTimeout(() => {
    console.log('set2')
}, 20)//定时20ms 后执行console.log('set2')
//下边循环时间假定是50ms
for (let i = 0; i++ < 100000000;) {
    i === 99999999 && console.log('2')
}

大家可以猜测下它的输出内容？

输出结果是1，2，set2， setTimeOut

那你可能会好奇为什么结果是这样的呢，为了讲清楚这个问题答案，我们先要搞清楚两个任务，一个是macro-task（宏任务），一个micro-task（微任务）

macro-task（宏任务）

大概包括：script(整体代码), setTimeout, setInterval, setImmediate（NodeJs）, I/O, UI rendering。

micro-task（微任务）

大概包括: process.nextTick（NodeJs）, Promise, 来自不同任务源的任务会进入到不同的任务队列。

执行顺序是一开始先

主循环下来，先把微队列任务执行完成，在执行宏队列的一个任务，这个宏任务完成在去执行微队列，就这样依次循环执行

有了上边的基础，我们接下来在看下下边代码执行过程

JavaScript
setTimeout(() => {
console.log(4)
}, 0);
//Promise构造方法先执行
new Promise((resolve) =>{
console.log(1);
for (var i = 0; i < 10000000; i++) {
i === 9999999 && resolve();
}
console.log(2);
}).then(() => {
console.log(5);
});
console.log(3);

Promise的构造方法的第一个方法会立即执行的，后边then会放到微任务队列里办

第一遍执行完成后会输出

1 2 3

此时的宏队列与微队列是

宏队列	微队列
setTimeout	then

一开始js脚本是执行的宏队列，这里轮到了微队列，会先执行Promise里边的then，此时微队列空了，接着执行宏队列，后续输出的应该是

5 4

最终输出的是

1 2 3 5 4

在看下下边这个复杂的

JavaScript
<script>
setTimeout(() => {
    console.log(4)
}, 0);
new Promise((resolve) => {
    console.log(1);
    for (var i = 0; i < 10000000; i++) {
      i === 9999999 && resolve();
    }
    console.log(2);
}).then(() => {
    console.log(5);
});
console.log(3);
</script>
<script>
console.log(6)
new Promise((resolve) => {
    resolve()
}).then(() => {
    console.log(7);
});
</script>

首先我们可以看到script有2个，我们暂且叫它script1，

宏队列	微队列
script1
script2

宏队列开始执行script1 的脚本后，Promise构造方法会立即执行，所以会先打印出来

1 2 3

此时对列为

宏队列	微队列
script2	then5
setTimeout4

script1 宏任务执行完成后，接着要把微队列任务都要执行完成，接着执行5

1 2 3 5

宏队列	微队列
script2
setTimeout4

执行script2

1 2 3 5 6

宏队列	微队列
setTimeout4	then7

接着执行微队列then

1 2 3 5 6 7

就剩最后一个宏任务setTimeout4了

1 2 3 5 6 7 4

如果现在大家搞清楚了，js 的异步多少会有一些了解

接下来介绍下async 与 await

async

async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。

JavaScript
function resolveAfter2Seconds() {
return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
});
}

async function asyncCall() {
console.log('calling');
const result = await resolveAfter2Seconds();
console.log(result);
// Expected output: "resolved"
}

asyncCall();

我们来分析下这个代码

宏队列	微队列
asyncCall()

执行asyncCall()

输出calling

宏队列	微队列
	resolveAfter2Seconds()

宏队列	微队列
2s以后setTimeout

宏队列	微队列
	console.log(result)

最终输出结果

Calling

#2秒以后输出

resolve

Promise

Promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值。

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

待定（pending）：初始状态，既没有被兑现，也没有被拒绝。

已兑现（fulfilled）：意味着操作成功完成。

已拒绝（rejected）：意味着操作失败。

Promise.reject(reason)

返回一个状态为已拒绝的 Promise 对象，并将给定的失败信息传递给对应的处理函数。

Promise.resolve(value)

返回一个状态由给定 value 决定的 Promise 对象。如果该值是 thenable（即，带有 then 方法的对象），返回的 Promise 对象的最终状态由 then 方法执行结果决定；否则，返回的 Promise 对象状态为已兑现，并且将该 value 传递给对应的 then 方法。

await

await 操作符用于等待一个 Promise 兑现并获取它兑现之后的值。它只能在异步函数或者模块顶层中使用。

当函数执行到 await 时，被等待的表达式会立即执行，所有依赖该表达式的值的代码会被暂停，并推送进微任务队列（microtask queue）。然后主线程被释放出来，用于事件循环中的下一个任务。即使等待的值是已经敲定的 promise 或不是 promise，也会发生这种情况。例如，考虑以下代码：

JavaScript
async function foo(name) {
console.log(name, "start");
await console.log(name, "middle");
console.log(name, "end");
}

foo("First");
foo("Second");

// First start
// First middle
// Second start
// Second middle
// First end
// Second end

可以转化成

JavaScript
function foo(name) {
return new Promise((resolve) => {
    console.log(name, "start");
    resolve(console.log(name, "middle"));
}).then(() => {
    console.log(name, "end");
});
}

可以看下加黄色的字体，await可以转成 Promise.then，会被放到微任务队列

JavaScript
let i = 0;

queueMicrotask(function test() {
i++;
console.log("microtask", i);
if (i < 3) {
    queueMicrotask(test);
}
});

(async () => {
console.log("async function start");
for (let i = 1; i < 3; i++) {
    await null;
    console.log("async function resume", i);
}
await null;
console.log("async function end");
})();

queueMicrotask(() => {
console.log("queueMicrotask() after calling async function");
});

console.log("script sync part end");
//async function start
//script sync part end
//microtask 1
//async function resume 1
//queueMicrotask() after calling async function
//microtask 2
//sync function resume 2
//microtask 3
//async function end