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);