Promise在异步调用时的使用场景

下面基于,前端要调用接口删除图片的环境背景下,说明为了实现删除成功图片消失,删除失败图片不会消失的实现过程`

用到ES6中的promise语法

promise异步调用**

在handleRemove方法调用删除图片的api方法，删除成功时return true，删除失败时return false;

//删除图片 
handleRemove(file, fileList) { console.log(file) 
    // alert('删除') 
    // return true; 
    //删除图片 
    courseApi.deleteCoursePic('1').then((res) => { 
    if(res.success){ 
        this.$message.success('删除成功'); 
        return true; 
    }else{ 
        this.$message.error(res.message); 
        return false; 
    } 
}); 
},

在上边代码中将提交的课程id故意写错，按照我们预期应该是删除失败，而测试结果却是图片在页面上删除成功。

问题原因：

通过查询deleteCoursePic方法的底层代码，deleteCoursePic最终返回一个promise对象。

Promise是ES6提供的用于异步处理的对象，因为axios提交是异步提交，这里使用promise作为返回值。

Promise的使用方法如下：

Promise对象在处理过程中有三种状态：

pending：进行中

resolved：操作成功

rejected: 操作失败

Promise的构建方法如下：

const promise = new Promise(function(resolve,reject){ 
    //...TODO... 
    if(操作成功){ 
        resolve(value); 
    }else{
        reject(error); 
    } 
})

上边的构造方法function(resolve,reject)执行流程如下：

1）方法执行一些业务逻辑。

2）如果操作成功将Promise的状态由pending变为resolved，并将操作结果传出去

3）如果操作失败会将promise的状态由pending变为rejected，并将失败结果传出去。

上边说的操作成功将操作结果传给谁了呢？操作失败将失败结果传给谁了呢？

通过promise的then、catch来指定

promise.then(function (result) { 
    console.log('操作成功：' + result); 
}); 
promise.catch(function (reason) { c
    onsole.log('操作失败：' + reason); 
});

例子如下：

1、定义一个方法，返回promise对象

this.testPromise(3).then(res=>{
          alert(res)
      }).catch(res=>{//catch就是执行失败的回调方法
          alert("失败了。。。。。")
          alert(res)
      })

2、调用此方法

向方法传入偶数、奇数进行测试。

this.testpromise(3).then(res=>{
    //在then中对成功结果进行处理 
    alert(res) 
}).catch(res=>{
    //在catch中对操作失败结果进行处理 
    alert(res) 
})

3、最终将handleRemove方法修改如下

handleRemove方法返回promise对象，当删除成功则resolve，删除失败则reject。

 //删除图片
      handleRemove(file, fileList) {
        console.log(file)
        //调用服务端去删除课程图片信息，如果返回false，前端停止删除
        //异步调用
        return new Promise((resolve,rejct)=>{
          courseApi.deleteCoursePic(this.courseid).then(res=>{
            if(res.success){
              this.$message.success("删除成功");
                //成功
              resolve()
            }else{
              this.$message.error("删除失败");
                //失败
              rejct()
            }
          })
        })
      },

因此,是用来处理异步调用的,在方法外面包裹一个new promise(){},在里面执行异步调用,成功则调用resolve,否则rejct回退

一般在前端定义通用rest请求接口,都是这样定义的,

如:post请求

//post请求
  requestPost (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },

请求通过执行resolve返回数据,失败执行catch返回错误信息

注意:我们调用postApi时,并没有写catch,这是因为我们后端做了异常处理,无论请求成功与否,都会返回相关信息,所以前段会认为都是请求成功了