1、同步与异步

异步： 可以多条任务线去执行程序，一条任务卡顿不影响其他任务。

2、异步数据场景

  1. function getData(){
  2.     setTimeout(() => {
  3.         let data = "hello world"; //模拟一个异步数据
  4.         return data; //return只能返回同步的数据
  5.     },500)
  6. }
  8. let data = getData();
  9. console.log(data) //值为undefined，普通函数无法通过返回值返回异步数据。

3、回调函数

回调函数是将函数作为参数传递给另一个函数，通过回调函数可以获取异步数据，实例代码如下所示：

  1. function getData( next ){ //参数为一个函数
  2.     setTimeout(() => {
  3.         let data = "hello world"; //模拟一个异步数据
  4.         next(data); //将数据传递给这个函数
  5.     },500)
  6. }
  8. getData((data) => {
  9.     console.log(data);  //可以获取到异步数据
  10. })

接下来制作一个案例巩固这个例子：定义两个异步获取数据的函数，一个是getFirstName，另一个是getLastName，将两个函数获取到的数据连接成为一个名字，实例代码如下所示：

  1. function getFirstName( next ){
  2.     setTimeout(() => {
  3.         let data = "李";
  4.         next(data);
  5.     },500)
  6. }
  8. function getLastName( next ){
  9.     setTimeout(() => {
  10.         let data = "小明";
  11.         next(data);
  12.     },500)
  13. }
  15. getFirstName(first => {
  16.     getLastName( last => {
  17.         let name = first + last;
  18.         console.log(name);
  19.     })
  20. })

虽然成功获取到了数据，但是通过上面的例子，我们发现，多个异步数据使用回调函数来嵌套，代码的维护成本会越来越高，接下来，我们使用es2015的语法来逐步优化这个案例。

4、promise对象

在ES2015中新加入了Promise对象，Promise对象用来解决异步问题，关于异步问题，我们会在第8章详细讲解，本章只要概括性地了解Promise对象的语法即可，创建一个Promise对象的语法如下所示：

  1. // resolve的作用是把异步获取的数据结果传递出来。
  2. let getData = new Promise((resolve) => {
  3.     let data = "string data";
  4.     resolve(data);
  5. })

Promise构造函数的参数是一个函数，而函数的形参resolve同样也是一个函数，调用resolve可以将数据从promise对象中传递出来。

使用Promise对象，模拟刚才的异步获取数据，实例代码如下所示：

  1. // promise的构造函数，需要传递一个参数
  2. function getLastName(){
  3.     return new Promise(function(resolve){
  4.         // resolve也是一个函数
  5.         setTimeout(() => {
  6.             let data = "小明"
  7.             resolve(data);
  8.         },500)
  10.     });
  11. }
  13. // 客户端代码
  14. let promise = getLastName();
  15. promise.then(function(d){
  16.     console.log(d);
  17. })

使用Promise对象，定义刚才案例中的两个函数，一个是getFirstName，另一个是getLastName，将两个函数获取到的值链接到一起。

5、async函数

async函数

async函数与Promise对象结合使用，可以优雅地处理异步问题，声明async函数的语法如下所示:

  1. async function fun(){
  2.     //async函数内部可以使用await关键字
  3. }

我们用一个实际的案例来讲解async函数与Promise对象的用法。

在Promise对象的示例中，我们用resolve函数将数据传递出来之后，然后可以用async函数中的await关键字接收数据，完整的实例代码如下所示。

  1. // resolve的作用是把异步获取的数据结果传递出来。
  2. let getData = new Promise((resolve) => {
  3.     let data = "string data";
  4.     resolve(data);
  5. })
  7. async function showData(){
  8.     let data = await getData;
  9.     console.log(data)
  10. }
  12. showData();

await后面跟着一个Promise对象，可以获取到Promise对象内部resolve传递出来的数据，这这里需要注意的是：

await关键字必须写在async函数内部。