Promise的使用

Promise的使用

问题：多层回调函数 相互嵌套 就形成了回调地狱

缺点: 大量冗余代码相互嵌套可读性很差 不易维护

setTimeout(()=>{
    setTimeout(()=>{
        setTimeout(()=>{
            
        }，3000)
    },2000)
},1000)

如何解决回调地狱

Es6 新增了promise的概念

1：Promise是一个构造函数

​ 创建一个promise实例，const p = new Promise()

​ new出来的promise实例对象，代表一个异步操作

2：Promise.prototype上包含一个then方法

​ 每次new Promise得到的实例对象

​ 都可以通过原型链的方式访问到then方法

3：then方法用来预先指定成功和失败的回调函数

4:catch方法用来捕获错误的

var p = new Promise()
p.then(成功的回调函数，失败的回调函数)
p.then(()=>{},()=>{})

**注意:**调用then方法，成功的回调函数是必选的，失败的回调函数是可选的

Promise 构造函数 参数是一个回调函数，回调函数有两个参数resolve reject
new出来的promise实例对象，代表一个异步操作
异步请求成功执行resolve方法 异步请求失败执行reject方法
promise状态： 等待 pending 成功 fulfilled 失败rejected 状态一旦改变，不能再更改

 new Promise((resolve, reject) => {
      console.log($)
      //  异步请求
      $.ajax({
        type: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks',
        success(res) {
          // resolve(res)
          reject('错误')
        },
      })
    })
      .then((res) => {
        console.log(res, 'res')
        return res.data
      })
      .then((res1) => {
        console.log(res1, 'res1')
        return 4
      })
      .then((res2) => {
        console.log(res2)
      })
      .catch((err) => {
        //专门用来捕获错误的
        console.log(err, 'catch')
      })

all方法

Promise.all()方法会发起并行的Promise异步操作，等所有的异步操作全部结束后才会执行下一步的then操作

 // http://www.liulongbin.top:3006/api/news
    // Promise.all()方法会发起**并行**的Promise异步操作，
    // 等所有的异步操作全部结束后才会执行下一步的then操作
    function fn() {
      return axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/news',
      })
    }

    function fn1() {
      return axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks',
      })
    }

    Promise.all([fn(), fn1()])
      .then(([res1, res2]) => {
        console.log(res1, res2)
      })
      .catch((err) => {
        console.log(err)
      })

race方法

Promise.race()方法会发起并行的Promise异步操作，只要任何一个异步操作完成，就立即执行下一步的then操作

 // Promise.race()方法会发起**并行**的Promise异步操作，只要任何一个异步操作完成，就立即执行下一步的then操作
    function fn() {
      return axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/news',
      })
    }

    function fn1() {
      return axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks',
      })
    }

    Promise.race([fn(), fn1()])
      .then((res) => {
        // 只要任何一个异步操作完成，就立即执行下一步的then操作
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })

基于promise封装异步请求

1:定义方法getPromise

2:方法接收参数请求的数据，请求的url

3：方法的返回值未promise实例对象

  function getBookList(data, url) {
      return new Promise((resolve, reject) => {
      //异步请求
        axios({
          method: 'GET',
          url: url,
          params: data,
        })
          .then((res) => {
            resolve(res)
          })
          .catch((err) => {
            reject(err)
          })
      })
    }

    getBookList({}, 'http://www.liulongbin.top:3006/api/getbooks')
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })

async/await

async/await 是es6引入的新语法，用来简化promise异步操作，在async/await出现之前，我们只能通过then的方法处理promise异步操作

如果在function中使用了await 那么function必须被async修饰

在async方法中，第一个await之前的代码会同步执行，await之后的代码会异步执行

  function fn() {
      return axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/news',
      })
    }

    function fn1() {
      return axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks',
      })
    }
    // async 说明函数是一个异步操作的函数
    // 按照顺序执行异步请求数据
    async function getData() {
      console.log(2)
      // await等待
      let res1 = await fn1()
      console.log(res1)
      let res2 = await fn()
      console.log(res2)
      console.log(1)
    }

    getData()
    // async -await  用同步的写法 执行异步操作