AJAX&Promsie | 青训营笔记

98 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第5天

AJAX

操作流程

1.创建对象 2.初始化,设置请求方法和URL 3.发送请求 4.设置事件回调函数

    const xhr = new XMLHttpRequest()
    xhr.open('method','URL')
    xhr.send()
    xhr.onreadystatechange=()=>{
        if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)){

        }
    }

Promise

promise构造函数是同步执行的,then方法是异步执行的

  new Promise(resolve=>{
      console.log(1);
      resolve(3);
  }).then(num=>{
      console.log(num);
  });
  console.log(2);
  //依次为 123

Promise的状态

实例对象的一个属性 [PromiseState]

  • pending 未决定的
  • resolve / fullfilled 成功
  • rejected 失败 其状态只能改变一次

Promise对象的值

实例对象中的另一个属性 [PromiseResult] 保存着异步任务 成功或失败 的结果

  • resolve
  • reject

Promise.resolve()

  • 如果传入的参数是非 Promise对象,则返回的结果为成功的Promise对象
  • 如果传入的参数是 Promise对象,则参数的结果决定了 resolve 的结果
let p= Promise.resolve(521)
let p2 = Promise.resolve(new Promise((resolve, reject) => {
    // resolve('ok')
    reject('error')
}))

Promise.reject()

无论传入的参数是何种类型的,返回的状态永远都是失败的

Promise.all()

参数为n个 Promise 对象组成的数组 只有所有的 Promise 都成功才成功,有一个失败就直接失败

Promise.race()

参数为n个 Promise 对象组成的数组 第一个完成的 Promise 的结果状态就是最终的状态 ,返回的结果也为第一个完成的 Promise 的结果

Promise.then()

  • 执行回调函数,并且可以同时执行多个回调函数
  • 参数可以接受两个回调函数,第一个为状态成功时的回调,第二个为状态失败时的回调
  • 该方法的返回值为一个新的 Promise 的对象,其结果和状态由 then()指定的回调函数执行的结果决定
  • 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

Promise链

promise 的 then()返回一个新的 promise,因此可以通过 then 的链式调用串连多个同步/异步任务

异步穿透

  • 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调
  • 前面任何操作出了异常, 都会传到最后失败的回调中处理

中断 promise 链

  • 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
  • 办法: 在回调函数中返回一个 pendding 状态的 promise 对象
p.then(()=>{
    return new Promise(()=>{
        
    })
})