promise、async、await

一、promise

1.1 promise有2个特性

1. promise 只有三个状态 pending(进行中)、resolved(已完成)、rejected(已失败)，一旦开始执行就不能被打断或终止。
2. 状态的变化只能从 pending→ resolved 或 pending→rejected

1.2 promise的声明

const promise = new Promise( function(resolve,reject) {
	if(1<2){
		resolve(1)
	} else {
		reject(2)
	}
})

二、async

async的中文意思就是异步的，用法很简单直接在原有的函数之前加async即可将原有的函数变成异步函数，async函数返回的是一个promise对象。

async function hello(){
 	return 'hello'
}
console.log(hello())

运行结果如下：

普通函数前加async之后变成了异步函数，并返回了一个promise对象。

通过async声明的函数变成了异步函数，返回的是promise对象，如果想获取到promise对象的值，我们可以使用then方法，如下：

async function hello(){
	 	return 'hello'
	}
	console.log(hello())
	hello().then(resp=>{
		console.log(resp)
	})

通过then方法就得到了 async函数返回的promise的值。

三、await

await的意思是等待，那么它在等什么呢？ 可以是任何表达式，不过我们常用的是promise对象的表达式。注意 await只能放在async函数中

了解了 promise 、async 、await之后我们来看看 怎么通过async和await来实现异步转同步。

有了上边的了解我们知道promise是一旦执行就不会被打断，执行后的状态不会被改变，当promise执行完成之后 我们可以通过调用then方法来获取到promise的执行结果，通过async将函数声明为异步函数，不会影响后边的函数的执行，async函数返回一个promise对象，await后接表达式，常接promise表达式，表示等待 异步函数执行完成后，再执行下边的操作。由此，通过asynvc和await就可以实现异步转同步，而避免了回调函数的回调地狱，并且更容易维护。下边我们来看一个例子，来加深对async和await的使用的理解。

以下示例均在vue环境中

点击地图，获取当前区域的人数，通过handleFetchAreaStaffNum()获取到人数后，再调用 addAreaAlert()显示信息窗.

await 必须放在async 方法中， await后接带有promise的表达式，这里的请求是用到axios，经过了封装，fetchAreaStaffNum()函数返回的结果是promise,因此fetchAreaStaffNum（）才是真正的异步函数，

示例：

async handleShowAreaAlert() {
	await this.handleFetchAreaStaffNum()
	this.addAreaAlert()
}
async handleFetchAreaStaffNum() {
      await fetchAreaStaffNum(this.areaId).then(resp=>{
        if(resp.data.code === 200) {
          this.areaStaffNum = resp.data.data
        } else {
          this.areaStaffNum = 0
        }
      })
    },
}