JSON

通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise(2)

字号+ 作者:H5之家 来源:H5之家 2015-10-09 09:12 我要评论( )

上面的代码太长,提炼一下关键部分(示意,不能运行) var promise = $.ajax();promise.then(function(data) {// resolvereturn data.code? new Promise().reject(): new Promise().resolve(data);// 如果没有错,

上面的代码太长,提炼一下关键部分(示意,不能运行)

var promise = $.ajax(); promise.then(function(data) { // resolve return data.code ? new Promise().reject() : new Promise().resolve(data); // 如果没有错,就返回一个新的 promise,并使用 data 来 resolve, // 也可以直接返回 data, // 这样后面 then 的 resolve 部分才能收到数据 }, function() { // rejected }); // 调用阶段 promise.then(function(data) { // 处理 data });

也许你没注意到,其实上面的代码基本上就是 ES6 的 Promise 了。下面正式用 ES6 Promise 改写上面的示意代码

var promise = new Promise(function(resolve, reject) { $.ajax().then(resolve, reject); // 上面这句没看懂?那换成这样你一定会懂 // $.ajax().then(function(data) { // resolve(data); // }, function() { // reject(); // }); }).then(function(data) { return data.code ? Promise.reject() : Promise.resolve(data); // 这里 Promise.resolve(data) 同样可以直接替换为 data }); // 调用没变 promise.then(function(data) { // 处理 data });

怎么样,差别不大吧。不知不觉就会 ES6 Promise 了!

ES6 的 Promise

上面已经把 ES6 的 Promise 带出来了,现在只需要把常用方法列出来作为参考即可

注意,小写的 promise 表示 Promise 对象

  • new Promise(executor),产生一个新的 Promise 对象

  • executor(resolve, reject)
    executor、resolve 和 reject 均为函数,在 executor 中,正确处理调用 resolve() 返回数据,异常处理直接 throw new Error(...) 或调 reject() 返回数据。

  • Promise.resolve(data),产生 Promise 对象并 resolve

  • Promise.reject(),产生 Promise 对象并 reject

  • promise.then(onResolve, onReject),然后……继续处理

  • promise.catch(onReject),project.then(null, onReject) 的语法糖,和 jQuery 的 promise.fail() 差不多(但不同)。

  • 参考

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jquery each遍历json

      jquery each遍历json

      2016-01-31 16:17

    • jQuery解析json格式数据简单实例

      jQuery解析json格式数据简单实例

      2016-01-26 08:00

    • jQuery+json实现的简易Ajax调用实例

      jQuery+json实现的简易Ajax调用实例

      2016-01-20 18:01

    • Jquery和angularjs获取check框选中的值小技巧

      Jquery和angularjs获取check框选中的值小技巧

      2016-01-18 18:02

    网友点评