ES6中的Promise对象的理解

作者:陆金龙    发表时间:2023-01-10 20:53   

关键词:  

参考:博客园 香吧香的博文《ES6 中 Promise对象使用学习

1.不使用promise对象的ajax请求

ajax异步方式请求数据时,我们不能知道数据具体回来的时间,所以只能将一个callback函数传递给ajax封装的方法,当ajax异步请求完成时,执行callback函数。

定义:

export const GetDataList = (params,successHandler,errorHandler) => {
 axios
     .get(url, {params})
     .then(res => {
        successHandler(res.data)
     })
     .catch(err => {
        errorHandler(err.data)
     })
}

调用:

    GetDataList(params,successHandler,errorHandler)

    successHandler(result){
        if(result.code === 200){
            this.setState({
                list:result.data
            })
        }
    }

    errorHandler(error){
        console.log(error)
    }

2.使用Promise的ajax请求

promise对象接受resolve和reject两个参数,当一个异步动作发生时,promise对象通过resolve完成对动作成功进行解析,通过reject捕获这个动作的异常。

定义:

export const GetDataList = (params) => {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params
            })
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
}

调用:不用通过回调函数处理,而是通过then和catch来分别处理调用成功和异常两种情况。

GetDataList(params)
        .then(result=>{
            if(result.code === 200){
                this.setState({
                    list: result.data
                })
            }
        }).catch(error=>{
           console.log(error)
        })

一个promise对象,通过new Promise().then()执行下一步骤操作。

(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);