ES6-Promise

Promise作用:

更加优化的异步处理方案

将网络请求代码和异步处理代码分离

Promise基本语法；

new Promise((resolve,reject) => {

/*异步块函数*/

//成功时回调

resolve('resolve')

//失败时回调

reject('reject')

}).then(data=>{

//成功回调函数

console.log('resolve:',data)

//输出：resolve:resolve

// 1.缩写: return 'a' 等价于 return Promise.resolve('a') 执行下面的then函数

// 2. return Promise.reject('a') 执行下面的catch函数

}).catch(error=>{

//失败回调函数

console.log('reject:',error)

//输出：reject：reject

})

Promise三种状态：

• ppending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
• pfulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
• preject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

使用场景：

1.回调地狱（回调里面嵌套回调）如下：

 

 

使用promise：

code：

new Promise((resolve,reject)=>{

console.log('begin');

console.log('a');

resolve('b')

}).then(data=>{

console.log(data)

return 'c'

}).then(data=>{

console.log(data);

return 'd'

}).then(data=>{

if (data==='d'){

return Promise.reject('end')

}

return 'e'

}).catch(e=>{

console.log(e);

})

输出：

begin

a

b

c

end

2.异步链式调用

// 请求一:

let isResult1 = false

let isResult2 = false

$ajax({

url: '',

success: function () {

console.log('结果1');

isResult1 = true

handleResult()

}

})

// 请求二:

$ajax({

url: '',

success: function () {

console.log('结果2');

isResult2 = true

handleResult()

}

})

function handleResult() {

if (isResult1 && isResult2) {

//

}

}

使用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 => {

console.log(results[0]); //第一个异步请求结果

console.log(results[1]); //第二个异步请求结果

})