ES6 Promise的使用
首先,我们为什么要用Promise语法?
Promise作为替代回调函数执行,作为异步操作的处理方法之一,是解决JS异步执行时候回调函数嵌套回调函数这一问题的方法,它更简洁地控制函数执行流程
一般promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);
常见写法为:
let p = new Promise(resolve, reject){}.then();
通常,我们处理异步请求,会使用回调函数嵌套回调函数
例如:
fn("a", function(a) { fn1("b", function(b) { fn2("c", function(c) { fn3("d", function(d) { alert("回调成功,结果为:"a+b+c+d") }) }) }) })
但我们发现这样写的代码可读性并不高
如果使用promise语法,则更加符合阅读习惯,只需要在then函数中写处理逻辑即可
new Promise(function(resolve , reject) { resolve(1); }).then(function(val) { console.log(val); return new Promise(function(resolve , reject) { resolve(2); }); }).then(function(val) { console.log(val); return new Promise(function(resolve , reject) { resolve(3); }); }).then(function(val) { console.log(val); return new Promise(function(resolve , reject) { resolve(4); }); }).then(function(val) { console.log(val); });
运行结果为:
接下来模拟在实际项目开发中,在异步请求完数据后处理数据的情况,我们在这里用settimeout来模拟异步请求
let mypromise = new Promise(function(resolve, reject){ setTimeout(function(){ resolve("成功!"); }, 1000); }); mypromise.then(function(successMessage){ console.log(successMessage); });
运行结果为:
我们可以看到这里的“成功!”在运行一秒后执行
常用API
(1) new Promise
new Promise(function(resolve, reject){ });
(2) PromiseObj.then(resolveFn,rejectFn)
resolveFn:Promise对象成功的回调处理函数
rejectFn:Promise对象失败的回调处理函数
new Promise((resolve,reject)=>{ }).then((resolveData)=>{ },(rejectErr)=>{ })
(3) PromiseObj.catch()
new Promise((resolve,reject)=>{ }).catch(err=>{ console.log(err) })
(4)PromiseObj.resolve()
Promise.resolve(123).then(data=>{ console.log(data) })
相关推荐
88254251 2020-11-01
bowean 2020-07-08
88520191 2020-07-05
Magicsoftware 2020-06-11
whynotgonow 2020-06-06
whynotgonow 2020-06-03
陈旭阳 2020-06-02
88520191 2020-05-20
89500297 2020-05-16
前端开发Kingcean 2020-04-16
nmgxzm00 2020-11-10
xixixi 2020-11-11
MarukoMa 2020-09-02
88234852 2020-09-15
陈旭阳 2020-08-31
whynotgonow 2020-08-19
前端开发Kingcean 2020-07-30
whynotgonow 2020-07-29