await的使用问题。

Question

提问：

以下两个函数其实执行效果都一样。就这个问题我在群里跟别人争执很久，但是我也看了MDN案例使用try...catch，但是我看着写一堆try...catch在外面，看着难受。老师为啥我后面链式调用完了，这样写有什么缺点？

以下写了查询列表获取数据的两种方式：

• inquireList函数的await后面使用了axios返回的promise链式调用then和catch都加上了。
• inquireList2函数的await后面使用了axios返回promise，在try...catch。

以下伪代码：

async inquireList() {
 this.listLoading = true
 const params = {}
 await axios.get('/list', {params})
   .then((res)=> {
     if (res.data && res.data.code === 200) {
       this.listData = res.data.data
     }
   })
   .catch((e)=> {
     console.log(e)
   })
 this.listLoading = false
}


async inquireList2() {
 this.listLoading = true
 const params = {}
 const res = await axios.get('/list', {params})
 try {
   if (res.data && res.data.code === 200) {
     this.listData = res.data.data
   }
 } catch (e) {
   console.log(e)
 }
 this.listLoading = false
}

Answer 1

双越 2022-03-19 15:23:34

第一，你都用 await 了，就别再用 then 了。await 和 promise 混用，很不易读

第二，try catch 一般是把 await 也包含进去的，而不是在 await 后面。

Answer 2

双越 2022-03-19 08:35:04

看着有点乱。你的核心问题是什么？

• 提问者 zhangweb #1

  其实我想问的是await 后面跟着写then和catch好不好？执行inquireList和inquireList2的效果都是一样的。就想问这两个函数的写法哪个好

• 提问者 zhangweb #2

  我使用md语法写的提问，手机看着排版确实乱，电脑看着就很整齐，应该是手机显示问题。