前端小白入门Vue之Promise

前言

    $.ajax('url', function (data1) {
      $.ajax(data1['url2'], function (data2) {
        $.ajax(data1['url3'], function (data3) {
          $.ajax(data1['url4'], function (data4) {
            console.log(data4)
          })
        })
      })
    })

首先为什么会引入我们的Promise：在ajax中如果考虑极端情况，我们在某些业务中会进入不断循环的回调地狱，这样会使我们更难进行管理这种项目。

一、Promise用来做什么？

作用：Promise是异步编程的一种解决方案。
异步事件：网络请求

二、使用步骤。

resolve:表示为一个函数，成功时执行then中的事件
reject:表示为一个函数，失败时执行catch中的事件
一般写法：但个请求

    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("hhhhhh")
      }, 1000)
    }).then((data) => {
      // 调用成功时触发的事件
      console.log(data)
    }).catch(() => {
      // 调用失败时出现的事件
      console.log('err')
    })

一般写法：多个请求

    new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve()
      })
    }).then(() => {
      setTimeout(() => {
      })
      return new Promise((resolve,reject) => {
        resolve()
      })
    }).then(() => {
      setTimeout(() => {
      })
    })

Promise的流程：
1.当我们进行异步编程时，我们将异步事件使用Promise进行包装。
2.然后开始进行异步操作。
3.异步操作会进入到等待、成功、失败三种状态。
4.如果成功就会调用resolve(),resolve又会执行then中的函数，如果失败就会调用reject(),reject会执行catch中的函数。

在then中的其他写法，可以省略catch：

    new Promise((resolve,reject) => {
      resolve()
      reject()
    }).then(() => {
      console.log("成功时执行的函数")
    },() => {
      console.log("失败时执行的函数")
    })

请求实例：
1.aaa -> 处理
2. aaa111 -> 处理
3. aaa111222 -> 处理

第一种写法

    new Promise((resolve, reject) => {
      resolve('aaa')
    }).then(res => {
      return new Promise((resolve, reject) => {
        resolve(res + '111')
      })
    }).then(res1 => {
      new Promise((resolve, reject) => {
        resolve(res1 + 222)
      })
    }).then(res2 => {
      console.log(res2)
    })

第二种写法

    new Promise((resolve, reject) => {
      resolve('aaa')
    }).then(res => {
      return Promise.resolve(res + '111')
    }).then(res1 => {
      new Promise.resolve(res1 + 222)
    }).then(res2 => {
      console.log(res2)
    })

第三种写法

    new Promise((resolve, reject) => {
      resolve('aaa')
    }).then(res => {
      return res + '111'
    }).then(res1 => {
      new res1 + 222
    }).then(res2 => {
      console.log(res2)
    })

第四种写法

    new Promise((resolve, reject) => {
      resolve('aaa')
    }).then(res => {
      return Promise.resolve(res + '111')
      // 第一种处理异常
      return Promise.reject('err')
      // 第二种处理异常
      throw 'err'
    }).then(res1 => {
      new Promise.resolve(res1 + 222)
    }).then(res2 => {
      console.log(res2)
    }).catch(err => {
      console.log(err)
    })

实例：需要同时拿到两个网络请求

    Promise.all([
      new Promise((resolve, reject) => {
      }),
      new Promise((resolve, reject) => {
      }),
    ]).then(results => {
      console.log(results[0])
      console.log(results[1])
      console.log(results)
    })

总结

本次主要是对promise网络请求格式语法的熟练