ES6中的Promise

promise

promise深入理解

then 方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

相当于一个容器，保存着未来才会结束的事件（异步操作）的一个结果
各种异步操作都可以用同样的方法进行处理axios

特点：

1.对象的状态不受外界影响，处理异步操作三个状态（Pending进行 Resolved成功 Rejected失败）
2.一旦状态改变，就不会再变，任何时候都可以得到这个结果

使用Promise

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

let method = new Promise((resolve, reject) => {
  if (1) {
    setTimeout(() => {
      resolve('异步执行')
    }, 1000)
  } else {
    reject('error')
  }
})

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

//res就是上面Promise函数resolve()返回的值
method.then(function (res) {
  console.log(res);
}, function (err) {
  console.log(err);
})

promise异步加载图片

let src = './img/1598845881590433.jpg'
let load = function (src) {
  return new Promise(function (resolve, reject) {
    let img = new Image()
    img.onload = function () {
      resolve(this);
    }
    img.onerror = function () {
      reject(new Error('img src load error!'));
    }
    img.src = src
  })
}
load(src).then(function (res) {
  console.log(res);
})

promise封装Ajax

const p = new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'https://api.apiopen.top/getJoke')
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            //返回的数据
            resolve(xhr.response);
          } else {
            //状态码
            reject(xhr.status);
          }
        }
      }
    })
    p.then(function (value) { 
      console.log(value);
    }, function (reason) {
      console.error(reason);
    })

Promise的方法

一个promise函数使用另一个promise函数，由最终的promise决定状态

let p1 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('p1执行的结果')
  }, 1000)
})
let p2 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve(p1)
  }, 1000)
})
p2.then(function (res) {
  console.log(res);
})

finally()方法 es8

let p1 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('数据')
  })
})
p1.then(function (res) {
  console.log(res);
}, function (err) {
  console.log(err);
}).finally(function () {
  console.log('finally方法');
})

多个promise 整合成一个promise all方法

let p1 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('p1执行了')
  }, 1000)
})
let p2 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('p2执行了')
  }, 2000)
})
let p3 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('p3执行了')
  }, 3000)
})
Promise.all([p1, p2, p3]).then(function (res) {
  console.log(res);
})
//返回数组形式结果