promise

promise

promise设计在es5就出现了，不过是ex6正式出现在语法中

promise它是一种容器，存放一个未来才会结束的事件（一般来说是异步的）

特点

• 对象的状态有三种padding fulfilled reject。它的状态和外界无关
• 一旦状态改变，就不会再变。不同于绑定的事件，每次触发可能会有不同的结果，状态只有两种变化的可能：从padding到fulfilled和从padding到reject。一旦状态改变，状态就凝固了，不会再变了，会一直保持这个结果

学习promise前提

• 精通回调的思想

  // 工具函数
  function creatData(callback) {
    callBack(parseInt((Math.random()*(10-1)+1)))
  }
  let obj = {
    Data: 100,
    tool: function() {
      creatData((n)=>{
        this.Data = n
      })
    }
  }
  
  

  ​

• 精通异步编程的思想

• 异步函数：计时器

let p1 = new Promise(function(n1,n2){
  // 主动的产生数据：比如网络请求
 let data = {code: 404,info: "假数据"}
  // n2 表示触发告知Promise体系 业务错误的数据
  if(data.code == 404) {n2(data.info)} 
  else if(data.code == 200) {n1(data.info)}
  
})
// 取数据  then函数是一个异步函数
p1.then(function(data){
  console.log(data)
},function() {
  // 获取错误的业务数据
})

promise它被设计成了一个全局构造函数

这个数据容器内部有三种状态：等待(padding) ==> 产生正确数据(resolve) 产生错误数据(reject)

promise构造函数有两个参数，resolve,reject

var p1 = new Promise((resolve,reject)=> {
  resolve(100)
})
p1.then((data)=>{
  console.log(data,111)
}).catch((e)=> {
  console.log(e)
})

• then(cb1,cb2)：取数据

  cb1和cb2都是回调函数，如果是resolve则调用cb1,如果是reject调用cb2,cb1和cb2只能一个调用，要么正确，要么错误

  返回值：得到一个新的promise对象，由cb函数的返回值对象决定，如果cb函数返回值对象是promise则就返回这个对象；如果是其他的对象，就把cb函数的返回值封装成premise对象

• catch()：捕获错误方法

  还可以使用catch方法，可以直接捕获错误信息

  p1.then(function(data){
    // 获取正确的值
    console.log(data)
  },function(err) {
    // 获取错误的业务数据
  })
  
  

promise的执行顺序

var p1 = new Promise((resv,reg)=> {
  // 这个函数是同步的，但可以再次执行异步的业务
  console.log('工具任务1')
  $.get("/ajax1",(data)=> {
    console.log('工具任务2异步')
    resv(data)
  })
  console.log('工具任务3')
})
console.log('业务1')
p1.then((res)=> {
  console.log('业务2')
})
console.log('业务3')

工具任务1 》工具任务3 》业务1 》业务3 》工具任务2异步 》业务2

异步任务分为： 异步宏任务：计时器；异步微任务：then

排队指的是异步任务的回调回到主线程任务时出现了"太多"

一个任务开始后：同步>异步微任务 >再去执行排队的异步宏任务>同步>异步微任务>排队的异步宏任务...

promise封装AJAX

<script>
    // promise封装AJAX
    function myaxios(url) {
        let p = new Promise((n1,n2)=> {
            let xhr = new XMLHttpRequest() || new ActiveXObject()
            xhr.open("GET",url)
            xhr.send()
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    n1(xhr.responseText)
                }
            }
        })
        return p
    }
    myaxios('http://127.0.0.1:8080/ajax').then((data)=> {
        console.log(data)
    })
</script>