ES6 Promise简单封装

/*

* 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:如有错误我改,望轻喷,谢谢大家!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 特点 Promise能将回调分离出来,在异步操作执行之后,用链式方法执行回调,虽然es5用封装函数也能实现,但是如...
    一二三kkxx阅读 3,767评论 0 1
  • 在ES6当中添加了很多新的API其中很值得一提的当然少不了Promise,因为Promise的出现,很轻松的就给开...
    嘿_那个谁阅读 9,008评论 2 3
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 12,776评论 1 56
  • 前言 本文旨在简单讲解一下javascript中的Promise对象的概念,特性与简单的使用方法。并在文末会附上一...
    _暮雨清秋_阅读 6,621评论 0 3
  • 在黑暗的屋子里面学习经济学的那段日子里。 在逐渐慢慢形成自己的经济学思维体系的那段日子里面。 我辞掉了工作。 我也...
    孤独中的喧嚣阅读 1,085评论 0 0