关于Promise那些事系列（2）「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。接着

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。

接着说Promise~ 在这里插入图片描述

`Promise`基本用法

Promise实例生成之后，可以使用then方法执行resolved状态和rejected状态的返回函数，也就是上面说的操作成功和失败的结果传递出去。

    promise.then(value=>{
      //成功
    },error=>{
      //失败
    })

then方法可以接收两个回调函数作为参数。第一个回调函数是Promise对象状态变为 resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选函数。

基本使用

    function timer (ms){
      return new Promise((resolve,reject)=>{
        setTimeout(resolve,ms,"done")
      })
    }

    timer(1000).then(resp=>{
      console.log(resp)   
    })

    //输出:done

这段代码，timer方法返回一个Promise实例。过了一段时间（这里是1s之后），Promise对象的状态变为了resolved，之后触发then方法绑定的回调函数。

Promise对象创建之后就会立即执行

    let promise = new Promise((resolve,rejeict)=>{
      console.log('promise立即执行')
      resolve()
    })

    promise.then(()=>{
      console.log("resolved")
    })
    console.log("hello world")

这段代码输出的结果是在这里插入图片描述

解析一下过程：Promise对象新建后立即执行，所以首先输出的是"promise立即执行"，然后，then方法指定的回调函数，将在所有同步任务执行完毕之后才会执行（因为promise是宏任务），所以“resolved”是最后输出的。

封装异步加载图片

    function loadImageAsync(url) {
      return new Promise((resolve, reject) => {
        let img = new Image()
        img.onload = () => {
          resolve(img)
        }
        img.onerror = () => {
          reject("图片加载失败")
        }
        img.src = url
      })
    }

这个imageLoadAsync的函数，使用Promise包装了一个图片加载的异步操作。如果加载成功，就调用resolve方法，失败则调用reject方法。

封装Ajax请求这应该是日常最常用的一个封装函数，我们在开发中很少使用原生的Ajax请求，一般都是在项目里单独封装一个项目独有的Ajax请求。

    const HttpX = function (url) {
      let promise = new Promise((resolve, reject) => {
        const header = function () {
          if (this.readyStatus != 4) {
            return
          }
          if (this.status === 200) {
            resolve(this.response)
          } else {
            reject(new Error(this.statusText))
          }
        }
        const xml = new XMLHttpRequest()
        xml.open("GET", url)
        xml.onreadystatechange = header
        xml.responseType = "json"
        xml.setRequestHeader("Accept","application/json")
        xml.send()
      })
      return promise
    }

    HttpX("/post.json").then(function(json){
      console.log("Content:" + json)
    },function(error){
      console.log("出错了",error)
    })

上面的代码中，HttpX是对XMLHttpRequest 对象的封装。发出一个针对JSON数据的HTTP 请求，并且返回一个Promise对象。需要注意的是，在这个函数内部，resolve和reject函数调用的时候都带有参数。

关于Promise那些事系列（2）

Promise基本用法

`Promise`基本用法