async和await的使用

ps酷教程

已于 2022-07-23 11:37:28 修改

阅读量388

点赞数

分类专栏：前端学习文章标签：前端 javascript vue.js

于 2022-02-25 21:48:50 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/123141685

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

//加入购物车
async addShopcar() {
   //1:在点击加入购物车这个按钮的时候，做的第一件事情，将参数带给服务器（发请求），通知服务器加入购车的产品是谁
   //this.$store.dispatch('addOrUpdateShopCart'),说白了，它是在调用vuex仓库中的这个addOrUpdateShopCart函数。
   // 这个dispatch派发请求返回的结果就是一个Promise(即便派发的函数没有使用async)
   //2:你需要知道这次请求成功还是失败，如果成功进行路由跳转，如果失败，需要给用户提示
   try { // 这里的try-catch只有在使用await一个Promise,这个Promise状态是reject时,才会被catch住
     //成功
     await this.$store.dispatch("addOrUpdateShopCart", { // dispatch调用返回的也是个Promise
       skuId: this.$route.params.skuid,
       skuNum: this.skuNum,
     });
     //3:进行路由跳转
     //4:在路由跳转的时候还需要将产品的信息带给下一级的路由组件
     //一些简单的数据skuNum，通过query形式给路由组件传递过去
     //产品信息的数据【比较复杂:skuInfo】,通过会话存储（不持久化,会话结束数据在消失）
     //本地存储|会话存储，一般存储的是字符串
     sessionStorage.setItem("SKUINFO",JSON.stringify(this.skuInfo));
     this.$router.push({name:'addcartsuccess',query:{skuNum:this.skuNum}});
   } catch (error) {
     //失败
     alert(error.message);
   }

//加入购物车的||修改某一个产品的个数
async addOrUpdateShopCart({ commit }, { skuId, skuNum }) {
  //发请求:前端带一些参数给服务器【需要存储这些数据】，存储成功了，没有给返回数据
  //不需要在三连环（仓库存储数据了）
  //注意:async函数执行返回的结果一定是一个promise【要么成功，要么失败】
  let result = await reqAddOrUpdateShopCart(skuId, skuNum);
  if (result.code == 200) {
    //返回的是成功的标记(返回一个不为空的字符串,即为成功)
    return "ok";
  } else {
    //返回的是失败的标记
    return Promise.reject(new Error("faile"));
  }
},

//获取产品信息的action
async getGoodInfo({ commit }, skuId) {
  // 1、axios请求返回的是一个promise,
  // 2、当函数使用async修饰之后,await后面的Promise返回结果之后,才会继续执行它下面的代码(异步执行)
  //    ,并且await一个Promise会从Promise中拿到返回的结果,即下面的result就不是Promise了,而如果没有使用await的话,那reqGoodsInfo就是返回一个Promise对象
  // 3、async修饰的函数返回值一定是个Promise
  // 4、async和await必须同时使用，否则会报错
  let result = await reqGoodsInfo(skuId); 
  if (result.code == 200) {
    commit("GETGOODINFO", result.data);
  }
},

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
  <script>
    function test() {
      return new Promise((resolve, reject) => {
        console.log('p')
        resolve("r");
        console.log('already exec...')
      });
    }

    async function test2() {
        let j = await test();
        console.log(j,'j')
    }

    test2();
    console.log("end");
  </script>
</html>
<!--
p
already exec...
end
r j
-->