JavaScript async和awiat 使用

async 函数

函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定

await表达式

await右侧的表达式一般为promise对象，但也可以是其他值
如果表达式是promise对象，await返回的都是promise的成功值
如果表达式是其他值，直接将此值作为await返回值

注意

await必须写在async函数中，但async函数中可以没有await
如果await的promise失败了，就会抛出异常，需要通过try ... catch来捕获处理

使用实例：

node.js的世界，从callback开始，不会止于async。

async/await优雅的错误处理

javascript 复制代码

//一般情况下 async/await 在错误处理方面，主要使用 try/catch，像这样
const fetchData = () => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('fetch data is me')
  }, 1000)
 })
}

(async () => {
 try {
  const data = await fetchData()
  console.log('data is ->', data)
 } catch(err) {
  console.log('err is ->', err)
 }
})()

//这么看，感觉倒是没什么问题，如果是这样呢？有多个异步操作，需要对每个异步返回的 error 错误状态进行不同的处理，以下是示例代码
const fetchDataA = () => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('fetch data is A')
  }, 1000)
 })
}

const fetchDataB = () => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('fetch data is B')
  }, 1000)
 })
}

const fetchDataC = () => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('fetch data is C')
  }, 1000)
 })
}

(async () => {
 try {
  const dataA = await fetchDataA()
  console.log('dataA is ->', dataA)
 } catch(err) {
  console.log('err is ->', err)
 }

 try {
  const dataB = await fetchDataB()
  console.log('dataB is ->', dataB)
 } catch(err) {
  console.log('err is ->', err)
 }

 try {
  const dataC = await fetchDataC()
  console.log('dataC is ->', dataC)
 } catch(err) {
  console.log('err is ->', err)
 }
})()

//这样写代码里充斥着 try/catch，有代码洁癖的你能忍受的了吗？这时可能会想到只用一个 try/catch。
// ... 这里 fetch 函数省略
(async () => {
 try {
  const dataA = await fetchDataA()
  console.log('dataA is ->', dataA)
  const dataB = await fetchDataB()
  console.log('dataB is ->', dataB)
  const dataC = await fetchDataC()
  console.log('dataC is ->', dataC)
 } catch(err) {
  console.log('err is ->', err)
  // 难道要定义 err 类型，然后判断吗？？
  /**
   * if (err.type === 'dataA') {
   * console.log('dataA err is', err)
   * }
   * ......
   * */
 }
})()
// 如果是这样写只会增加编码的复杂度，而且要多写代码，这个时候就应该想想怎么优雅的解决，async/await 本质就是 promise 的语法糖，既然是 promise 那么就可以使用 then 函数了
(async () => {
 const fetchData = () => {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
    resolve('fetch data is me')
   }, 1000)
  })
 }

 const data = await fetchData().then(data => data ).catch(err => err)
 console.log(data)
})()

//在上面写法中，如果 fetchData 返回 resolve 正确结果时，data 是我们要的结果，如果是 reject 了，发生错误了，那么 data 是错误结果，这显然是行不通的，再对其完善。
(async () => {
 const fetchData = () => {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
    resolve('fetch data is me')
   }, 1000)
  })
 }

 const [err, data] = await fetchData().then(data => [null, data] ).catch(err => [err, null])
 console.log('err', err)
 console.log('data', data)
 // err null
 // data fetch data is me
})()
//这样是不是好很多了呢，但是问题又来了，不能每个 await 都写这么长，写着也不方便也不优雅，再优化一下
(async () => {
 const fetchData = () => {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
    resolve('fetch data is me')
   }, 1000)
  })
 }

 // 抽离成公共方法
 const awaitWrap = (promise) => {
  return promise
   .then(data => [null, data])
   .catch(err => [err, null])
 }

 const [err, data] = await awaitWrap(fetchData())
 console.log('err', err)
 console.log('data', data)
 // err null
 // data fetch data is me
})()

// 将对 await 处理的方法抽离成公共的方法，在使用 await 调用 awaitWrap 这样的方法是不是更优雅了呢。如果使用 typescript 实现大概是这个样子
function awaitWrap<T, U = any>(promise: Promise<T>): Promise<[U | null, T | null]> {
 return promise
  .then<[null, T]>((data: T) => [null, data])
  .catch<[U, null]>(err => [err, null])
}

awiat返回结果是promise处理

javascript 复制代码

//原本代码
async search1(name) {
      const { data: resp } = await this.$http.post("/qureyBaseInfo/" + name);
      return resp;
    },
    
 showResumeById(row){
      this.dialogTableVisible = true;
      this.test.name=row.mytoudi_myname;
      this.test.id=row.mytoudi_resumeID;
    },
    
 async searchJianLi() {
      var name=window.sessionStorage.getItem("enterprise")
      const { data: resp } = await this.$http.post("/showZPGL2/"+name);
      for(var i=0;i<resp.length;i++){
        resp[i].yj= this.search1(resp[i].mytoudi_myname)  
      }
      console.log('qqqq',resp.yj)
      console.log("tttttt",resp)
      // this.table=resp;
    }
//控制台打印
yj: Promise
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object

原因promise解释，主要是在一个异步请求方法

方法1 中使用了另一个异步请求方法
方法2 在方法2中存在返回值

"Promise构造函数的参数是一个函数，函数里面的代码是异步的，即Promise里面的操作，和Promise()外面的操作时异步"同时"进行的。此外，只要在函数前面加上async 关键字，也可以指明函数是异步的。

async关键字实际是通过Promise实现，如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回，但如果timeout 函数内部抛出错误，那么就会调用Promise.reject() 返回一个promise 对象。若某函数调用一个异步函数（比如内部含有primise），该函数应用async修饰。

await表示"等待"，修饰返回promise 对象的表达式。注意await 关键字只能放到async 函数里面。"

javascript 复制代码

//只需要在方法1中使用方法2的前面加上await就可以了
async searchJianLi() {
      var name=window.sessionStorage.getItem("enterprise")
      const { data: resp } = await this.$http.post("/showZPGL2/"+name);
      for(var i=0;i<resp.length;i++){
        resp[i].yj=await this.search1(resp[i].mytoudi_myname)  
      }
      console.log('qqqq',resp.yj)
      console.log("tttttt",resp)
      // this.table=resp;
  }