ES6 Promise简单封装

2018-02-02  本文已影响0人  rookie_简书

/*

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

            消除异步操作(有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数)

*/

//下面就一起来看看怎么封装一个简单的Promise异步请求 :

createPromise=(url,type)=>{ //传入  路径,请求方式  作为参数

//返回Promise 对象

return new Promise((resolve,reject)=>{

//resolve 成功

//reject 失败

$.ajax({

type,

url,

// url:url  名字 值 一样可以简写

dataType:'json',

//成功

success(res){

//成功  调用 resolve

resolve(res)

},

//失败

error(err){

//失败 调用 reject

reject(err)

}

});

})

}

/*

* Promise.all方法接受一个数组作为参数都是一个Promise实例,只有这些 实例 状态都成功 promise才会成功,返回值为一个数组,

  这些参数参数中有一个被reject,那么promise状态就变成reject 

*/

/*

* Promise.then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数

*

*/

// Promise.all([

// createPromise('data/json1.json'),

// createPromise('data/json2.json')

// ]).then((res)=>{

// console.log(res)

// },(err)=>{

// console.log(res)

// })

/*

* Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数

*/

Promise.all([

createPromise('data/json1.json','post'),

createPromise('data/json2.json','post')

]).then((res)=>{

console.log(res)

}).catch((res)=>{

console.log('错误执行'+res)

})

//Promise.race  我称它为  竞速

/*

* Promise.race方法同Promise.all方法 写法一样 同样是将多个 Promise 实例,包装成一个新的 Promise 实例,

* 只要这些实例之中有一个实例率先改变状态,Promise的状态就跟着改变,那个率先改变的 Promise 实例的返回值,就是最终执行结果的返回值

*/

/*

Promise.race([

createPromise('data/json1.json'),

createPromise('data/json2.json')

]).then((res)=>{

console.log(res)

},(err)=>{

console.log(res)

})

*/

// 高版本JQuery(我这里用的是3.1.1)可直接调用Promise,用法如下:

/*

Promise.all([

$.ajax({url:'data/json1.json',dataType:'json'}),

$.ajax({url:'data/json2.json',dataType:'json'}),

]).then((res)=>{

console.log(res)

},(err)=>{

console.log(err)

})

*/

ps:如有错误我改,望轻喷,谢谢大家!

上一篇 下一篇

猜你喜欢

热点阅读