js 如何已同步方式获取异步函数的返回值

r囧r小猫 2024-04-22 15:06 80阅读 0赞

\*\*\* 参考 [MDN异步][MDN]

## 一、什么是普通函数 ##

普通函数的语句执行是同步的，就是一步一步按照代码顺序步骤执行。

//函数1
    function test1(){
        console.log("执行语句");//语句
    }
    
    //函数2
    let test2 = function(){
    
    }
    
    //函数3：箭头函数
    let test = ()=>{
    }

## 二、异步函数 ##

1.  #### 为什么会有异步函数 ####

答：浏览器提供的许多功能（尤其是最有趣的那一部分）可能需要很长的时间来完成，这样如果同步的话，就会导致其它任务被阻塞，消耗时间等待，所以js须让这些操作异步执行，不耽误其它任务执行。

因为同步执行任务有耗时问题，我们需要如下的来解决同步问题

*  通过调用一个函数来启动一个长期运行的操作

*  让函数开始操作并立即返回，这样我们的程序就可以保持对其他事件做出反应的能力

*  当操作最终完成时，通知我们操作的结果

这就是异步要完成的，而事件处理程序与其是最相似的，比如点击发送网络请求，它也是特殊的回调函数。

=》常见的异步模式

*  定时器： setTimeout

*  接口调用： 网络请求都是异步的

*  事件函数：点击事件、鼠标移入移出、右键 等等

*  使用 [fetch()][fetch] 发起 HTTP 请求

*  使用 [getUserMedia()][getUserMedia] 访问用户的摄像头和麦克风

*  使用 [showOpenFilePicker()][showOpenFilePicker][ (en-US)][showOpenFilePicker] 请求用户选择文件以供访问

#### 2. 回调函数（被淘汰了） ####

它是作为参数被传递到另一个函数里，并等待触发时机后，再返回结果。

例子如下：在这个例子中，第一步给输入的数据加 1，第二步加 2，第三步加 3，很容易产生不断嵌套，导致代码非常难阅读。所以现代大多数现代异步 API 都不使用回调。事实上，JavaScript 中异步编程的基础是**Promise**。

#### 3. 异步处理的基础Promise ####

下面是Promise的基础使用，fetch就是基于Promise来进行封装的，这种用then来捕获成功，用catch捕获执行失败。以这样的方式来处理异步。

#### 4. async 、await（重点） ####

async关键字为你提供了一种更简单的方法来处理基于异步 Promise 的代码。在一个函数的开头添加 async就可以使其成为一个异步函数。

async function myFunction() {
      // 这是一个异步函数
    }

在异步函数中，你可以在**调用一个****返回 Promise 的函数****之前使用 await 关键字**。

**这使得代码在该点上等待，直到 Promise 被完成，这时 Promise 的响应被当作返回值，或者被拒绝的响应被作为错误抛出****。**

注意：await 关键字在forEach函数中会失效，使用 for in 循环代替。

[MDN]: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing
[fetch]: https://developer.mozilla.org/zh-CN/docs/Web/API/fetch
[getUserMedia]: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
[showOpenFilePicker]: https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker