前言

本文主要介绍和总结Promise的作用、使用方式和其对应的一些方法,供大家参考学习，如有写的不准确的地方欢迎大家指出，相互学习，共同进步！

一. 什么是Promise?

在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：

function requestData(url, successCallback, failtureCallback) {
  // 模拟网络请求
  setTimeout(() => {
    // 拿到请求的结果
    // url传入的是localhost, 请求成功
    if (url === "localhost") {
      // 成功
      successCallback('success')
    } else { // 否则请求失败
      // 失败
      failtureCallback("error")
    }
  }, 3000);
}

//执行请求
requestData("kobe", (res) => {
  console.log(res)
}, (err) => {
  console.log(err)
})

但实际开发过程中有些情况需要多次调用服务器API，就会形成一个链式调用，比如为了完成一个功能，我们需要调用API1、API2、API3，依次按照顺序进行调用，这个时候就会出现回调地狱的问题，即嵌套层次深，不好维护，可读性差。这时候就需要用到Promise。

二. Promise使用方式

Promise 对象的构造器（constructor）语法如下：

// 传入的这个函数, 被称之为 executor
// > resolve: 回调函数, 在成功时, 回调resolve函数
// > reject: 回调函数, 在失败时, 回调reject函数
let promise = new Promise(function(resolve, reject) { // executor });

executor 最终将 promise 移至以下状态之一：

executor 只能调用一个 resolve 或一个 reject。一旦状态被确定下来，Promise的状态会被锁死，该Promise的状态是不可更改的。

上方代码改写为Promise:

// request.js
function requestData(url,) {
  // 异步请求的代码会被放入到executor中
  return new Promise((resolve, reject) => {
    // 模拟网络请求
    setTimeout(() => {
      // 拿到请求的结果
      // url传入的是localhost, 请求成功
      if (url === "localhost") {
        // 成功
        resolve(success)
      } else { // 否则请求失败
        // 失败
        reject('error')
      }
    }, 3000);
  })
}

const promise = requestData("localhost")

//then方法是Promise对象上的一个方法：它其实是放在Promise的原型上的 Promise.prototype.then
promise.then((res) => {
  console.log("请求成功:", res)
}, (err) => { 
   console.log("请求失败:", err)
})

//等价于
promise.then((res) => {
  console.log("请求成功:", res)
}).catch(err => {//catch方法也是Promise对象上的一个方法：它也是放在Promise的原型上的 Promise.prototype.catch
console.log("请求失败:", err)
})

当传入resolve不同的值的区别：

情况一：如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数；

情况二：如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态；举例：

 new Promise((resolve, reject) => {
   // pending -> fulfilled
  resolve(newPromise)
 }).then(res => {
  console.log("res:", res)
 }, err => {
  console.log("err:", err)
 })

情况三：如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据 then方法的结果来决定Promise的状态； 举例：

// 2.传入一个对象, 这个兑现有then方法
new Promise((resolve, reject) => {
  // pending -> fulfilled
  const obj = {
    then: function(resolve, reject) {
      // resolve("resolve message")
      reject("reject message")
    }
  }
  resolve(obj)
}).then(res => {
  console.log("res:", res)
}, err => {
  console.log("err:", err)
})