ES7之async/await-CFANZ编程社区

async 是 ES7 才有的与异步操作有关的关键字。

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

async function helloAsync(){
    return "helloAsync";
}
  
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
 
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

function testAwait(){
   return new Promise((resolve) => {
       setTimeout(function(){
          console.log("testAwait");
          resolve();
       }, 1000);
   });
}
 
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
 }
helloAsync();

使用async和await配合，可以不使用then实现函数的同步执行。

await返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
}
helloAsync ();
// hello world

正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。

function testAwait(){
   console.log("testAwait");
}
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync

await针对所跟不同表达式的处理方式：

Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。

非 Promise 对象：直接返回对应的值。

在React Native项目中的使用示例：

async login(){
    this.setState({
      loading:true
    })
    let { username, pwd } = this.state
    // console.log(username,pwd)
    AsyncStorage.setItem('username', username)
    AsyncStorage.setItem('pwd', pwd)

    let that = this
    
    // 发起网络请求
    await fetch(base +'/appLogin/login',{
      method: 'POST',
      body:JSON.stringify({
        name: username,
        pwd: md5(pwd),
      }),
      headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
    }).then(response => response.json()).then((data) => {
      this.setState({
        loading:false
      })
      console.log("res",data)
        if(data.code === 200){
          let mydata = data.data
        　//操作mydata
      }).catch((err)=>{
        console.log(err)
      })
}

该程序片段使用fetch来请求接口，等到拿到数据后先使用

fetch().then(response => response.json()).then((data) => {})

进行解析，得到数据。