2.ES6 Promise特点

ES6 Promise

什么是Promise

• Promise(承诺)

• 从语法上来说: Promise是一个构造函数

• 从功能上来说: promise对象用来封装一个异步操作并可以获取其结果

• Promise 解决 JS 异步请求 **地狱回调`**问题

• 三个状态

  • pending (挂载中…等待状态)
  • resolved (满足状态)-fulfill
  • rejected (拒绝状态)

Promise 状态一旦发生改变，不可修改

• 状态改变的可能是
  • pending -> resolved (成功)
  • pending -> rejected (失败)

async定义的函数特点

• async 定义的函数 是 异步函数， 异步函数返回一个 Promise 对象

• 函数 如果 返回的是 普通数据(undifined…) 或者没有 return , 那么 异步函数将会返回一个 resolved 状态的 promise

• 如果 异步函数在执行过程中，产生异常， 那么 该异步函数 将会返回一个 rejected 状态的 promise

• 如果 异步函数 返回了一个 promise（例如 axios, ajax），那么异步函数最后返回的promise状态 由 返回的 promise确定

await 关键字

• 异步函数中，可以使用 await 关键字 将 函数中的异步执行的代码，以同步的方式执行

• 如果 await 后面跟的是一个 普通的数据，那么 会将普通的数据转成一个 resolved 状态的 promise对象 eg:await 1

• 如果 await 后面跟的是一个 promise 对象， 那么 如果 promise 返回 resolved 状态， 程序会继续向下执行

• 如果 promise 返回 rejected状态，那么 异步函数将 返回一个 rejected 状态的 promise

• await 后面的 promise 执行完成后，可以直接 将 promise 返回的结果 复制 给 某一个变量

      //c相当于axios发送异步请求返回的json数据res
      let c = await axios.post([[@{'/goods/saveGoods'}]],{
          name,
          price,
          img:value
      });
  

代码案例

<script th:inline="javascript">
	......

    let p = new Promise(function (resolve,reject){
        //resolve,reject都是一个函数
        //resolve是讲pending转为resolved
        //reject是讲pending转为rejected
        resolve("ok");
    });
    //当promise状态为resolve的时候会调用then中的回调函数，否则调用catch中的回调函数
    p.then(res=>console.log(res)).catch(err=>console.log(err));

    async function saveGoods(){
        let value = $("#img").val();
        let name = $("#name").val();
        let price = $("#price").val();
        if (name === "" || name == null){
            layer.msg("商品名称不能为空");
            //返回一个reject的promise  禁止关闭弹窗
            throw new Error("商品名称不能为空");
        }
        if (!/^\d+(\.\d)?$/.test(price)){
            layer.msg("商品价格最多保留一位小数");
            throw new Error("商品价格最多保留一位小数");
        }
        if (value === "" || value == null){
            layer.msg("商品图片不能为空");
            throw new Error("商品图片不能为空");
        }
        //如果表单录入的值没有问题 ，则发送异步请求
        // console.log(value)
        //c相当于axios发送异步请求返回的json数据res
        let c = await axios.post([[@{'/goods/saveGoods'}]],{
            name,
            price,
            img:value
        });
    }
</script>

参考博客

https://blog.csdn.net/guorui_java/article/details/122649856