NNU_从零开始了解一个WebGIS（Js）

1.同步与异步

首先明确一个大前提：JavaScript的主要优势之一就是任何事情都是异步的。

在大多数情况下，虽然主线程中还是按照代码中写的从上到下执行，但是写在上方的代码（例如一个函数）如若尚未执行完成，不会影响到下方的代码开始执行的时间。

例如：

doALongThing(() => console.log('I will be logged second!')); 
console.log('I will be logged first!');

 

由于函数有着不同的执行时长（即异步操作的延迟问题），会导致主线程中无法确定异步函数执行的先后顺序。

因此，若出现多个异步函数嵌套（如：异步函数 a 的 return 值，会被异步函数 b 作为参数传入）。

此时在主线程中便会无法保证——异步函数 b，能在异步函数 a 执行完成后再开始执行，即：无法保证 b 输入的参数已经由 a 的返回结果完成赋值。

Es6 新增 promise，Es7 新增 async/await。即为解决异步函数嵌套回调问题而提出。

 

1.1 promise、async、await 是用来干什么的？

简单的说，promise 就是限制异步执行的函数的执行顺序，即：让多个异步函数可以在主线程中严格按顺序从上往下运行。

async-await是promise和generator的语法糖。只是为了让我们书写代码时更加流畅，当然也增强了代码的可读性。简单来说：async-await 是建立在 promise机制之上的，并不能取代其地位。

举例说明：

let one = () => 1
function two(){
   return new Promise((resolve,reject) =>{  //new一个promise对象，对象里面的参数是一个 function，里面有两个变量，一个 resolve (成功时执行），reject（拒绝时执行）
       setTimeout(() => {   //这里用一个延时器来模拟请求反应的时间滞后
          resolve(2)
        }, 3000);
      })
}
let three = (a,b) => a+b;

 async function run(){   //async关键字：表示函数里有异步操作
   console.log(one());
   console.log(await two());  //await关键字：表示其修饰的表达式（此处即为调用函数two）需要等待结果。此处即：当 two 函数执行成功后，异步函数（async function run）才能继续进行下一步，如果请求失败那么下面的three也不会执行
   console.log(three(1,2));　　//也因此，await 必须出现在 async 函数的内部，无法单独使用
}　　　　　　　　　　　　　　　　　 //await 后面可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值）。虽然说 await 可以等很多类型的东西, 但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。
　　　　　　　　　　　　　　　　　　//如果 await 修饰的是 promise 对象，会造成异步函数(async function run)停止执行并且等待 promise 的解决；如果修饰的是原始类型的值，则立即执行（此时等同于同步操作）。

run()
//expected output:
//1
//2
//3
//若此处没有 async 与 await 则会输出
//1
//3
//2