async/await 笔记

async

1. async 会将函数变成一个异步函数。
2. async 不管写不写 return ，一定会返回一个 Promise对象
3. async 的函数中如果 return 了一个值，那么 async 会把这个值通过 Promise.resolv() 封装成 Promise 对象。因此可以通过下面的用法使用。

async function fn(){
    return '你好'
}        
fn().then( a => { console.log(a) } ) // a ==> 你好

await

1. await 会让代码阻塞
2. await 必须写在 async 的函数中。
3. let a = await fn() 中，如果 fn() 函数中返回的是一个 Promise 对象，对象中使用了 resolve(‘123’) ，那么 a 的值就是 ‘123’
4. let a = await fn() 中，如果 fn() 函数 return 的不是一个 Promise 对象，而是一个字符串或其他值，那么 a 的值会是一个字符串或其他值。
5. await 编写的代码会容易观看。

示例1：

# 通过 async/asait 实现以下功能
`# 有一个列表页面,页面需要展示所有我预定的场次信息,第一个接口返回了
# 所有场次id的合集,我需要根据这个合集去请求第二个接口,以此来获取场次
# 的具体信息`
 async getinfor() {
      let that = this;
      let list = await this.getlist(); // 获取列表id合集
      let roundlist = await this.getroundlist(list); //根据id获取场次
 },
 getlist() {
      var that = this;
      return new Promise((resolve, reject) => {
        axios.get(url)
          .then(data => {
            resolve(data);//调用resolve()函数返回下一个请求需要的列表
          });
      });
    }
 getroundlist(list){
    return new Promise((resolve, reject) => {
        axios.get(url + list)
          .then(data => {
            resolve(data);//调用resolve()函数返回下一个请求需要的列表
          });
      });
 }
 
 在上面的例子中，因为 await 会阻塞后面的代码，只有当 
 await this.getList() 执行完，才会执行下面的代码，所
 以很方便的实现了这个功能
 

示例2：

# 签到功能,若签到成功则返回座位历史预约情况,若签到失败则
# 只显示签到失败的弹框
async getseathistory() {
    var msign = await this.handlesign();
    swith(msign){
        case "sucess":
            this.$vux.toast.text("签到成功");
            ...
            //进行获取后续座位预约历史相关请求
            break;
        case "fail":
            this.$vux.toast.text("签到失败");
            break;
    }
},
handlesign() {
    return new Promise((resolve, reject) => {
        Axios.post(url,data).then(res => {
            if (res.data.code != 200) {
                resolve("sucess");
            } else if (res.data.code == 200) {
                resolve("fail");
            }
        });
    });
}

收藏

喜欢 0