Promise异步编程

Posted on by hackdl

目录

一、Promise的含义

二、基本用法

三、reject的用法

四、执行顺序

五、  项目中使用promise获取后端数据

六、catch的用法

七、finally的用法

八、Promise.all()

九、Promise.all()有一个是失败

十、Promise.race()全部是成功

十一、Promise.race()有一个是失败

十二、Promise.resolve()

十三、Promise.reject()

十四、promise.try()

十五、Promise 封装ajax

一、Promise的含义

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

promise翻译： 许诺;承诺;答应;保证;使很可能;预示

二、基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

const baseFun = () => {
    console.log(1)
    const promise = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据',
          },
          msg: '成功',
        })
      }, 1000)
    })
    promise.then((res) => {
      if (res.code === 200) {
        setTitle(res.data.title)
      }
    })
  }

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

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

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

三、reject的用法

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。

//reject的用法
  const baseRejectFun = () => {
    const promise = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据',
          },
          msg: '失败',
        })
      }, 1000)
    })
    promise.then(
      (res) => {
        if (res.code === 200) {
          setTitle(res.data.title)
        }
      },
      (res) => {
        if (res.code === 400) {
          setTitle(res.data.title)
        }
      }
    )
  }

四、执行顺序

Promise 新建后就会立即执行。

//执行顺序
  const baseOrderFun = () => {
    const promise = new Promise(function (resolve, reject) {
      console.log('promise')
      resolve()
      console.log('promise2')

    })
    promise.then((res) => {
      console.log('resolved')
    })
    console.log('other')
  }

Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

五、项目中使用promise获取后端数据

//项目中使用promise获取后端数据
  const baseApiFun = () => {
    Api.h5.userGetInfo({}).then((res) => {
      if (res.code === 200) {
        setTitle(res.data.nickname)
      }
  })

六、catch的用法

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

//catch的用法
  const baseCatchFun = () => {
    const promise = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据',
          },
          msg: '失败',
        })
      }, 1000)
    })
    promise
      .then((res) => {
        if (res.code === 200) {
          setTitle(res.data.title)
        }
      })
      .catch((res) => {
        if (res.code === 400) {
          setTitle(res.data.title)
        }
      })
  }

一般来说，不要在then()方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。

七、finally的用法

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

//finally的用法
  const baseFinallyFun = () => {
    const promise = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据',
          },
          msg: '失败',
        })
      }, 1000)
    })
    promise
      .then((res) => {
        if (res.code === 200) {
          setTitle(res.data.title)
        }
      })
      .catch((res) => {
        if (res.code === 400) {
          setTitle(res.data.title)
        }
      }).finally(() => {
        console.log('finally')
      })
  }

八、Promise.all()

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

//Promise.all()
  const baseAllFun = () => {
    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据',
          },
          msg: '成功',
        })
      }, 1000)
    })
    const promise2 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据2',
          },
          msg: '成功2',
        })
      }, 1000)
    })
    const promiseAll = Promise.all([promise1, promise2])
    promiseAll
      .then((res) => {
        console.log(res)
      })
      .catch((res) => {
        if (res.code === 400) {
          setTitle(res.data.title)
        }
      })
  }

九、Promise.all()有一个是失败

//Promise.all()有一个是失败
  const baseAllWithRejectFun = () => {
    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据',
          },
          msg: '失败',
        })
      }, 1000)
    })
    const promise2 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据2',
          },
          msg: '失败2',
        })
      }, 1000)
    })
    const promiseAll = Promise.all([promise1, promise2])
    promiseAll
      .then((res) => {
        console.log(res)
      })
      .catch((res) => {
        console.log('catch', res)
      })
  }

十、Promise.race()全部是成功

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

const baseRaceFun = () => {
    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据',
          },
          msg: '成功',
        })
      }, 5000)
    })
    const promise2 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据2',
          },
          msg: '成功2',
        })
      }, 1000)
    })
    const promiseRace = Promise.race([promise1, promise2])
    promiseRace
      .then((res) => {
        console.log(res)
      })
      .catch((res) => {
        console.log(res)
      })
  }

十一、Promise.race()有一个是失败

//Promise.race()有一个是失败
  const baseRaceWithRejectFun = () => {
    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据',
          },
          msg: '成功',
        })
      }, 5000)
    })
    const promise2 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据2',
          },
          msg: '失败2',
        })
      }, 1000)
    })
    const promiseRace = Promise.race([promise1, promise2])
    promiseRace
      .then((res) => {
        console.log(res)
      })
      .catch((res) => {
        console.log('catch', res)
      })
  }

十二、Promise.resolve()

//将现有对象转为 Promise 对象
      let promise = Promise.resolve(1)
      promise.then((res) => {
        console.log(res) //1
      })

十三、Promise.reject()

//将现有对象转为 Promise 对象
      let promise = Promise.reject(1)
      promise
        .then((res) => {})
        .catch((res) => {
          console.log('catch', res) //catch 1
        })

十四、promise.try()

处于提案阶段，还没有实现

javascript – Promise.try is not a function – SegmentFault 思否

 

十五、Promise 封装ajax

XMLHttpRequest（XHR）对象用于与服务器交互

XMLHttpRequest.open() 方法初始化一个新创建的请求

XMLHttpRequest.send() 方法用于发送 HTTP 请求

当一个XMLHttpRequest请求完成的时候会触发load 事件

XMLHttpRequest – Web API 接口参考 | MDN

const xhr = new XMLHttpRequest()
      xhr.open('post', 'http://yuying-api.xutongbao.top/api/light/user/captcha')
      xhr.send()
      xhr.addEventListener('load', (e) => {
        let res = JSON.parse(e.target.response)
        console.log(res)
        if (res.code === 200) {
          document.getElementById('img').innerHTML = res.data.captcha
        }
      })



  
    
    
    
    Document

开源项目地址：

https://github.com/xutongbao/learn-chatgpt

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: