promise和async/await的用法

Posted 2021-11-26 lianxisheng

promise和async都是做异步处理的, 使异步转为同步

1.promise

它和Promise诞生的目的都是为了解决“回调地狱”，

promise使用方法:

<button @click="testBtn()">点击</button>

　　

    get(data) {
      return new Promise((resolve, reject)=>{
        if (data > 5) {
          resolve(data);
        } else {
          reject("数据都是不大于5");
        }
      });
    },

    testF(num) {
      console.log("=====", num)
    },

    // 调用
    testBtn() {
      this.get(6).then((num)=>{
        this.testF(num);
      });
       this.get(3).then((num)=>{
        this.testF(num);
      });
    }

　　

2.async

async,会返回一个promise对象

　　如果async函数中是return一个值，这个值就是Promise对象中resolve的值；

　　如果async函数中是throw一个值，这个值就是Promise对象中reject的值。

async的使用方法:

async function imAsync(num) {
  if (num > 0) {
    return num // 这里相当于resolve(num)
  } else {
    throw num // 这里相当于reject(num)
  }
}

imAsync(1).then(function (v) {
  console.log(v); // 1
});

// 注意这里是catch
imAsync(0).catch(function (v) {
  console.log(v); // 0
})

　　

3.await

await不会单独使用,他会和async一起使用, 如果直接使用await的话会不起作用,

await会暂停当前async函数的执行，等待后面的Promise的计算结果返回以后再继续执行当前的async函数

使用场景:

在发起请求获取数据的时候,如果个return返回数据, 这时就需要用到await

async test(){

const currentArr = []
await this.$axios
        .get("/topsellerCategorys/", {
          marketplaceID: item.value,
          listname: "AnyDepartment"
        })
        .then(response => {
          if (response && response.data) {
                     currentArr  = response.data
            );
          }
        })
        .catch(error => {
          this.loadingShow = false;
          console.log(error);
        });
      if (this.fristCategory[0] && this.fristCategory[0].length) {
        this.selectArr = [this.fristCategory[0][0].label]; //类目默认赋值
        this.category = this.fristCategory[0][0].label; //选择的类目命默认赋值
      }
return  currentArr      
}