您现在的位置是：首页 > 博文答疑 > JS (Javascript) 异步编程博文答疑

JS (Javascript) 异步编程

Leo2023-05-29【9】

简介JS (Javascript) 异步编程

看到这篇笔记的小伙伴都应该已经了解了为什么JS里需要异步编程。如果还不清楚的，只能去搜索下js的同步（Synchronous）和异步(Asynchronous)，然后了解下先。

直接开始：

第一种应用：回调函数

网上已经有很多改写两个先后执行的例子为异步的方式。但是我们简单的用最最最简单的例子来理解下什么是回调函数。

<script>
function print() {
    console.log("test1");
}
setTimeout(print, 3000);
console.log("test1");
</script>

注解：在上例中"test1"会被优先输出，也就是说该语句不会等待setTimout结束。程序中的setTimout 3秒后执行函数print，它的第一个参数就是个回调函数。

其实，我们平时最常常常用到的场景是在网络请求的调用上。

在一段 JavaScript 逻辑中发起一个网络请求，向后端获取一个接口的数据，在请求返回数据后对数据进行一系列“响应处理”。这里用了一个简单的例子如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<script>
console.log("test1");
var netRequest = new XMLHttpRequest();
netRequest.addEventListener("load",reqCallback);
netRequest.open("GET", "https://powerone.cn/upload/test.json");
netRequest.send();
function reqCallback(){
   console.log("test2");
console.log(netRequest.responseText);
}
console.log("test3");
console.log(netRequest.responseText);
</script>

</body>
</html>

控制台输出结果：

test1
test3

test2
{
    "sites": [
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"baidu" , "url":"www.baidu.com" }
    ]
}

注：体会到了么？

咱们再考虑复杂一点点，如果调用第一个接口，得到结果后，需要把结果当作第二个接口的输入数据，然后以此类推，第三个，第四个，第五个......

大概我们根据回调函数写出来的结果会是这样的：

request('/api/data1', () => {
  request('/api/data2', () => {
    request('/api/data3', () => {
      request('/api/data4', () => {
        request('/api/data5', () => {
          // ...
        });
      });
    });
  });
});

注：这样写是不是很丑？那咱们来看看第二种方式。

第二种应用：Promise

为了解决回调模式的诸多弊端，JavaScript 社区中浮现出了一种被称为 Promise 的解决方案。准确地说 Promise 并不是一种语法特性，而是函数式编程中的一种编程思想。

直接来体悟下：

<script>
console.log("First");
new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("Second");
        resolve();
    }, 1000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Third");
            resolve();
        }, 4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Fourth");
    }, 3000);
});
console.log("Fifth");
</script>

输出结果为：

First
Fifth
Second
Third
Fourth

以下就是用 Promise 实现的一个网络请求逻辑:

fetch('https://powerone.cn/upload/test.json')
  .then((resp) => {
    // 当网络请求反回后才会开始执行这里的逻辑
return resp.json()
  }).then(data => {
     console.log(data)
  });

我们还可以使用 promise.all 和 promise.race 方法对多个网络请求进行并发管理，比如你想实现同时发出两个网络请求：

const tasks = [];
tasks.push(fetch('/api/data1'));
tasks.push(fetch('/api/data2'));
Promise.all(tasks).then((resp1, resp2) => {
  // 当两个请求都反回之后才会开始执行这里的逻辑
});

接下来，如果我们希望同时发出两个网络请求，先回来哪个就先采用哪个返回结果，我们可以使用 promise.race：

const tasks = [];
tasks.push(fetch('/api/data1'));
tasks.push(fetch('/api/data2'));
Promise.race(tasks).then((resp) => {
  // 两个请求中有任何一个返回后马上开始执行这里的逻辑
});

关于promise相关语法就不多做解释了，因为这里讨论的是异步编程。具体语法和运用，参考教程。

第三种应用：async/await 语法

在 ES7 当中，一种更进一步的面向异步编程的方案被正式标准化——async/await 语法。

对于只需要实现现业务逻辑的小伙伴来说，掌握 async/await 基本上足够了。

一样的，先上代码看看：

<script>
console.log("==Start==");
function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}
print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});
//写漂亮点：
async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();
console.log("==End==");
</script>

输出结果：

First
Second
Third

小伙伴们应该发现了,异步操作变得像同步一样了。把调用结果获取结果带入到上面的例子上，试试吧。

注意：本文叙述比较简单。还有两个方面可以扩展：

1.在应用上面，小伙伴们可以查询详细语法和例子，补充到自己的小本本上哦。

2.在异步编程里理解上，也可以深挖一下宏任务（macrotask）与微任务（microtask），然后理解下JS异步编程的设计模式和思想。

微信关注公众号二维码，可以获得更多免费学习资料：

您现在的位置是：首页 > 博文答疑 > JS (Javascript) 异步编程博文答疑

JS (Javascript) 异步编程

文章分类