马小看前端( 关于promise的那些往事 )(上)
首先什么是promise呢?(下面由马小为您在线分析)
我们先从字面单词理解分析啊,promise英文是希望的意思那么既然有希望那么也会破灭,这样的话就奠定了promise会有俩个值一个希望成功一个失败,我们先这么去理解,那么我们继续来看下面的了解promise
- Promise 用一个简单的词来形容它就是一个容器,里面保存了在未来才会结束的事件(毕竟希望也得要容器撑着么)
- 从语法上我们来分析一下,promise是一个对象,从它可以获取异步操作的最终状态(那么这就是我们上面说的希望有成功也有破灭对吧)最终的状态就是成功或者失败
- Promise是一个构造函数,他自己的身上就有all,reject,resolve等方法,原型上就是俩个方法then,catch等方法
通过我们上面希望的举例子我们大概有了认知,promise是一个构造函数它本身有俩个参数一个是成功的回调,一个是失败的回调,它本身也强大有俩个回调方法对应着俩参数一个是then成功的回调,一个是catch失败的回调(看到这里应该对promise有了大概的理解,那么我们继续往下看)
Promise的两个特点
我们来理解一下这个promise对象,promise的状态是不受外界影响的,下面总结了几个点的大概
1.pending 初始的状态
2.resolve 成功时候的回调
3.rejected 失败时候的回调
Promise有这以上的三种状态,只有异步操作可以决定当前是哪一种状态(那么我们可以得知promise是一个异步操作)其他的操作懂没办法改变它的状态
promise的状态一旦改变了的话那么任何时候都可以去得到这个结果,那么我们就可以理解为这个状态是不可以改变的,除非一种方式改变(那么就是老天给它改变)那么老天当然就是我们程序猿了,我们可以把初始值(pending)修改成resolve成为一个成功的回调可以把初始值(pending)修改成rejected失败的回调
下面我们来看看promise创建与调用
在promise中接受一个函数作为了参数,这俩个函数就是resolve和reject,这俩个就是回调函数
resolve函数的作用:我们到这里来仔细说说,在一个异步操作成功以后,才会去调用这个函数,并将这个异步操作的结果,作为参数传递出去
reject函数的作用:在异步操作失败的时候进行调用,并将异步操作报出错误
下面我们来看看代码
const promise = new Promise((resolve,reject) =>{
if(success){
resolve(value)
}else{
reject(error)
}
})
//在这段代码中我们可以清楚的理解到promise的参数与在何时去执行错误的回调
promise中的俩个方法(then,catch)
then()的方法(这个为成功以后去执行的回调函数)
then()这个方法就是在异步操作执行完以后去链式调用的方式去执行一个回调函数
Promise的特点就是这个链式调用,我们可以在then方法里面写Promise的对象如何继续来回的调用
下面一段代码来让你快速的理解Promise中then()的方法
//promise的回调then的方法
function deal(){
console.log("开始买衣服");
var p = new Promise(function(resolve,reject){
setTimeout(() => {
console.log("买了裤子")
resolve("买了鞋子")
}, 1000);
})
return p;
}
function word(data){
console.log("开始看鞋子:"+data)
var p = new Promise(function(resolve,reject){
setTimeout(() => {
console.log("终于快完了")
resolve("买完上衣")
}, 1000);
})
return p;
}
function out(data){
console.log("开始买上衣了:"+data)
var p = new Promise(function(resolve,reject){
setTimeout(() => {
console.log("终于买完了")
resolve("回家!")
}, 1000);
})
return p;
}
deal().then(word).then(out).then(function(data){
console.log(data)
})
//开始买衣服
//买了裤子
//开始看鞋子:买了鞋子
//终于快完了
//开始买上衣了:买完上衣
//终于买完了
//回家!
通过这个实例我们可以特别清楚的看到promise链式调用的强大之处,在then方法中将promise的对象返回,然后在通过then这个方法来回调操作(不得不感叹就是强大啊!!)
今天的Promise方法就先分享到这里,因为还有项目所以剩下的会在下一篇中去讲,来自3年程序猿马小的博客,感谢关注!!