1、promise是什么

  1. 主要用于异步计算
  2. 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
  3. 可以在对象之间传递和操作promise，帮助我们处理队列

2、异步回调的问题：

  1. 之前处理异步是通过纯粹的回调函数的形式进行处理
  2. 很容易进入到回调地狱中，剥夺了函数return的能力
  3. 问题可以解决，但是难以读懂，维护困难
  4. 稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护

3、promise简介

  1. promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
  2. 并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据
  3. 代码风格，容易理解，便于维护
  4. 多个异步等待合并便于解决

4、promise详解

resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise有三个状态：

  1. pending [待定] 初始状态
  2. fulfilled [实现] 操作成功
  3. rejected [被否决] 操作失败

当promise状态发生改变，就会触发**then()**里的响应函数处理后续步骤；
promise状态一经改变，不会再变。
Promise对象的状态改变，只有两种可能：

  1. 从pending变为fulfilled
  2. 从pending变为rejected。

这两种情况只要发生，状态就凝固了，不会再变了。

5、.then()

  1. 接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
  2. .then()返回一个新的Promise实例，所以它可以链式调用
  3. 当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
  4. 状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
  5. 如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
  6. 如果返回其他任何值，则会立即执行下一级.then()

6、错误处理两种做法：

Promise会自动捕获内部异常，并交给rejected响应函数处理。

（1）第一种错误处理

<script>
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject('bye')
            },2000)
        }).then((val)=>{
            console.log(val)
        },(err)=>{
            console.log("Error",error)
        })
    </script>

（2）第二种错误处理

<script>
        new Promise((resolve)=>{
            setTimeout(()=>{
                throw new Error('bye')
            },2000)
        }).then((val)=>{
            console.log(val)
        }).catch(error=>{
            console.log("Error",error)
        })
</script>
第一种：reject('错误信息').then(() => {}, () => {错误处理逻辑})
第二种：throw new Error('错误信息').catch( () => {错误处理逻辑})

推荐使用第二种方式，更加清晰好读，并且可以捕获前面所有的错误（可以捕获N个then回调错误）

7、promise的用法

（1）常见用法：

异步操作和定时器放在一起，，如果定时器先触发，就认为超时，告知用户；

例如：我们要从远程的服务家在资源如果5000ms还没有加载过来我们就告知用户加载失败

（2）现实中的用法

回调包装成Promise，他有两个显而易见的好处：

  1. 可读性好
  2. 返回 的结果可以加入任何Promise队列

8、回调地狱和promise对比

（1）回调地狱

/***
   第一步：找到北京的id
   第二步：根据北京的id -> 找到北京公司的id
   第三步：根据北京公司的id -> 找到北京公司的详情
   目的：模拟链式调用、回调地狱
 ***/
 
 // 回调地狱
 // 请求第一个API: 地址在北京的公司的id
 $.ajax({
   url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/city',
   success (resCity) {
     let findCityId = resCity.filter(item => {
       if (item.id == 'c1') {
         return item
       }
     })[0].id
     
     $.ajax({
       //  请求第二个API: 根据上一个返回的在北京公司的id “findCityId”，找到北京公司的第一家公司的id
       url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/position-list',
       success (resPosition) {
         let findPostionId = resPosition.filter(item => {
           if(item.cityId == findCityId) {
             return item
           }
         })[0].id
         // 请求第三个API: 根据上一个API的id(findPostionId)找到具体公司，然后返回公司详情
         $.ajax({
           url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/company',
           success (resCom) {
             let comInfo = resCom.filter(item => {
               if (findPostionId == item.id) {
                 return item
               }
             })[0]
             console.log(comInfo)
           }
         })
       }
     })
   }
 })

（2）promise写法

// Promise 写法
  // 第一步：获取城市列表
  const cityList = new Promise((resolve, reject) => {
    $.ajax({
      url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/city',
      success (res) {
        resolve(res)
      }
    })
  })

  // 第二步：找到城市是北京的id
    cityList.then(res => {
      let findCityId = res.filter(item => {
        if (item.id == 'c1') {
          return item
        }
      })[0].id
      
      findCompanyId().then(res => {
        // 第三步（2）：根据北京的id -> 找到北京公司的id
        let findPostionId = res.filter(item => {
            if(item.cityId == findCityId) {
              return item
            }
        })[0].id

        // 第四步（2）：传入公司的id
        companyInfo(findPostionId)

      })

    })

  // 第三步（1）：根据北京的id -> 找到北京公司的id
  function findCompanyId () {
    let aaa = new Promise((resolve, reject) => {
      $.ajax({
        url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/position-list',
        success (res) {
          resolve(res)
        }
      })
    })
    return aaa
  }

// 第四步：根据上一个API的id(findPostionId)找到具体公司，然后返回公司详情
function companyInfo (id) {
  let companyList = new Promise((resolve, reject) => {
    $.ajax({
      url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/company',
      success (res) {
        let comInfo = res.filter(item => {
            if (id == item.id) {
               return item
            }
        })[0]
        console.log(comInfo)
      }
    })
  })
}