对Promise及其应用进行扩展学习和实践

1. 异步编程与Promise的关系

2. Promise的作用与用法

3. Promise在实际环境下的应用

4. async/await的作用与用法

1. Promise实际上是一个执行器，它里面通常放的是将来要执行的异步代码，这些代码执行完成后会有两种结果：成功或失败，因此Promise有三种状态：pending(初始状态)、success/fullfill(成功状态)、reject(失败状态)

异步：当前调用发出之后在没有得到结果之前后续代码可以执行，当前调用的结果会以通知、回调函数的方式告诉调用者，异步是非阻塞的。

常见的应用场景：(1)网络请求(2)读取文件(3)js中的事件函数就是非常典型的异步表现形式。

function dobule(vaule,callback)
{
setTimeout((){
let r=vaule*2;
if(callback){
callback(r,vaule);
}
},1000);
}
console.log("star");
double(100);
double(100,function(result,value){
console.log(`${value}*2=${result}`);
});

异步返回值：通过为异步操作提供一个回调，在此回调函数中包含要使用异步返回值的代码，将异步结果作为该函数的函数。

2.

.then

promise对象.then( (结果)=>{
   //代码块
} )
​
    <script>
        let prm = new Promise((resolve, reject) => {
            // if (1) {
            if (0) {
                resolve('OK'); //调用成功时的回调函数
            } else {
                reject('出错了'); //调用失败时的回调函数
            }
        });
​
        prm.then(function(d) {
            console.log(d, 222);
        }, function(e) {
            console.log(e, 888);
        });
       //Promise对象的then()调用完成后返回的是Promise对象
        console.log(prm.then(), 666);
​
    </script>

.catch

promise对象.catch( (异常)=>{
   //代码块
} )


  <script>
        let prm = new Promise((resolve, reject) => {
            // if (1) {
            if (0) {
                resolve('OK'); //调用成功时的回调函数
            } else {
                reject('出错了'); //调用失败时的回调函数
            }
        });
​
        prm.then(function(d) {
            console.log(d, 222);
        }).catch(function(e) {
            console.log(e, 777);
        });
    </script>

 

3.

 // 利用Promise封装Ajax的GET请求，从指定url上获取JSON数据。
      function getJSON(url) {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (this.readyState === XMLHttpRequest.DONE) {
              if (this.status.toString().startsWith("2")) {
                resolve(this.response);
              } else {
                reject(new Error(`HTTP request Error : ${this.statusText}`));
              }
            }
          };
          xhr.open("GET", url);
          xhr.responseType = "json";
          xhr.send();
        });
      }

4.当update方法内不使用async函数时，代码可能会在没有完成update操作前就执行了querybutton方法，导致异常。此时需要对update方法加上await，可以认为 await 是在等待一个 async 函数完成，阻塞后续的执行。需要注意的是await 必须用在 async 函数中的原因，不能单独使用。只有当update方法出现返回值后，才会进行后续的操作。

update() {
  this.$refs.updateDialogFrom.validate(async valid => {
    if (valid) {
      try {
        this.tableLoading = true
        this.updateParam.expirationDate = this.updateDialogFrom.expirationDate

        const response = await resources.dataQuery.update(this.updateParam)
        if (response == '信息修改完成') {
          this.$message.success('修改成功!')
        } else {
          this.$message.error('修改失败，请稍后重试！')
        }
        this.querybutton()
      } catch (err) {
        let errStr = err.message
        this.$message.error(errStr)
      } finally {
        this.tableLoading = false
      }
    }
  })