Promise初探

1. promise有什么用

promise提供了对js异步编程的新的解决方案。

  • 他改变了传统回调的位置,不用去思考那些难缠的回调嵌套,让我们在思维上更容易理解回调,让回调更容易编写和维护。
  • 统一了回调的接口,让各种回调更易使用,而不用去看细看的各个回调函到底是什么。

2. promise如何实现

Promise是一个对象,可以通过构造函数生成。

new Promise(function(resolve,reject){
    //一些异步操作
    if(异步成功){
    resolve.call(undefined,text)//修改实例化的promise对象的状态为fulfilled,
    }else(异步失败){
    reject.call(undefined,error)//修改实例化的promise对象的状态为rejected,
    }
}).then(fn1,fn2)//then 方法添加了两个回调函数,第一个异步成功时调用,第二个异步失败时调用
  • promise有三种状态,两种状态变化,变化后固定不可变。
  • resolve()方法改变promise状态pending-->fulfilled,传出一个参数text,并立马调用then()方法中第一个函数
  • reject()方法改变promise状态pending-->rejected,传出一个参数error,并立马调用then()方法中第二个函数
  • then()方法用来添加回调函数。

3. promise执行顺序

  1. promise实例里的代码为同步任务,先执行;
  2. then()方法里的代码为微任务,在promise本次循环结束后立马执行;
  3. 最后是正常的异步任务,比如setTimeout()等。

4. 用promise写一个jQuery.ajax

window.jQuery = function(nodeOrSelector){
    nodes = {}
    nodes.addClass = function(){}
    nodes.text = function(){}
    return nodes
}
window.$ = window.jQuery

jQuery.ajax = function({url,method,body}){
    return new Promise(function(resolve,reject){
        let request = new XMLHttpRequest()
        request.open(method,url)
        request.onreadystatechange = () =>{
       if(request.readyState === 4){
           if(request.states >= 200 && request.states <300){
               resolve.call(undefined,request.responseText)
           }else if(request.states >= 400){
               reject.call(undefined,request)
           }
       }
   }
   request.send(body)
    })
}
var success = function(text){console.log(text)}
var fail = function(error){console.log(error)}
//使用有promise功能的ajax
jQuery.ajax({
    url:'/xxx',
    method: 'post',
    body:"a=1&b=2"
}).then{success,fail}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文思路 什么是异步 ES5异步实现方案 ES6 promise解决了什么问题 promise应该如何使用 1.异...
    _贺瑞丰阅读 2,593评论 0 0
  • 摘自:阮一峰 http://es6.ruanyifeng.com/#docs/promise 一、首先,我们要弄明...
    泡杯感冒灵阅读 4,162评论 0 4
  • 遭遇“恶魔金字塔” 项目需要,封装了一个省市区的地址选择器组件。 可以根据省份id、城市id和区id对组件设置默认...
    独爱一乐拉面阅读 4,241评论 0 2
  • 新的ES6中引入了Promise,目的是让回调更为优雅。层层嵌套的回调会让javascript失去美感和可读性,同...
    逃之夭夭li阅读 4,381评论 0 1
  • 回调地狱 回调地狱嵌套多个方法调用会创建错综复杂的代码,会难以理解与调试。当想要实现更复杂的功能时,回调函数也会存...
    Inlight先森阅读 7,755评论 0 4