promise详解

今日内容:

一.关于Promise

Es6中一个非常重要和好用的特性就是Promise

二.什么是Promise

Promise是异步编程的一种解决方案

三.定时器的异步事件

reject 译:拒绝

resolve 译:解决 解析

new Promise((resolve,reject)=>{
	setTimeout(()=>{
	//成功的时候调用resolve
	resolve("Hello Word")

//失败的时候调用reject
reject("error message")
},1000)

}).then((data)=>{
console.log(data)
console.log(data)
console.log(data)
console.log(data)
}).catch((err)=>{
console.log(err)
})

四.Promise的三种状态

首先.当我们开发中有异步操作时,就可以给异步操作包装一个Promise

异步操作之后会有三种状态

我们来一起看一下这三种状态:

1.pending:等待状态,比如正在进行网络请求,或者定时器没有到时见.

2.fulfill:满足状态,当我们主动回调resolve时,就处于该状态.并且会回调then()

3.reject:拒绝状态,当我们主动回调reject时,就处于该状态,并且回调catch()

五.Promise链式调用:

   <script>
//网络请求aaa ->自己处理
//处理:aaa111 ->自己处理
//处理aaa111222 ->自己处理
    new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('aaa')
        },1000)
    }).then((res)=>{
        //自己先处理10行代码
        console.log(res,'第一层的10行处理代码');
	//2.
    return new Promise((resolve)=>{
        resolve(res + "111")
    })
	}).then((res)=>{
    console.log(res,'第二层的10行处理代码');
    
    return new Promise((resolve)=>{
        resolve(res + '222')
    })
	}).then((res) =>{
    console.log(res,"第三层的10行处理代码")
	})
</script>

六.链式调用简写

1.如果我们希望数据直接包装成Promise.resolve,那么在then中可以直接返回数据

2.注意下面代码中,我讲的return Promise.resolve(data)改成了return data

七.Promise.all()

//Promise.all()表示两个请求执行完成后调用then()函数;其中它里面传入的参数是一个数组;
//在下面的例子中传入的是两个Promise
Promise.all([
    new Promise((resolve,reject) =>{
        $.ajax({
            url:'url1',
            success:function(data){
            resolve(data)
            }
        })
    }),
	new Promise((resolve,reject)=>{
		 $.ajax({
            url:'url2',
            success:function(data){
            resolve(data)
            }
        })
	})
}).then(results = >{
	results[0] //表示第一个请求到的结果
	results[1] //表示第二个请求到的结果
})

//注意:当上面的两个ajax请求执行完成后调用then(results)函数;其中results是一个数组;存储的是上面的两个
//ajax请求到的resolve