2018W28—Promise

这周看了阮一峰的ECMAScript 6入门的第14章《Promise对象》，同时也参考了廖雪峰官网的对于promise的讲解。

Promise 是异步编程的一种解决方案，从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。它有三种状态，分别是pending（进行中）、fulfilled（已成功）、reject（已失败）。Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject，其中resolve的作用是当对象状态从进行中到已成功时调用，并将结果作为参数传递出去。reject的作用是当对象状态从未完成变为失败时调用，并将报错信息传递出去。

创建一个promise，用setTimeout模拟调取接口数据， 返回一个随机数，如果小于1，则等待一段时间后返回成功，否则返回失败。

简单实例

   init () {
      return new Promise((resolve, reject) => {
        let timeOut = Math.random() * 2
        console.log(timeOut)
        setTimeout(() => {
          if (timeOut < 1) {
            console.log('call resolve()...')
            resolve('成功')
          } else {
            console.log('call reject()...')
            reject('失败')
          }
        }, 3000)
      })

    }

调用 

  test1 () {
      this.init().then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    }

返回结果

 

结果说明

当随机数是1.73的时候说明获取失败，走的reject（），调用时catch捕获异常，获取到reject返回的结果。

当随机数是0.98的时候说明获取成功，走的resolve（），通过.then()获取到成功的结果。

实际项目中的应用1

封装接口请求：

export function httpGet (url, params = {}) {
  url = changeUrl(url)
  return new Promise((resolve, reject) => {
    axios.get(url, {params: params})
      .then(res => res.data && res.data.code === 200 ? resolve(res.data) : reject(res.data))
      .catch(err => reject(err))
  })
}

调用

getRes () {
      util.httpGet (provinceUrl, {provinceId: 0})
        .then(res => {
          this.provinceArr = res.list || []
        })
    },

说明：httpGet需要两个参数，接口的地址和请求参数。用promise对axios请求进行了封装，调用时返回一个promise对象，可以对获取的数据进行操作或是返回捕获的异常的内容。

应用2

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();
    image.onload = function() {
      resolve(image);
    };
    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };
    image.src = url;
  });

}

说明：上面代码中，使用Promise包装了一个图片加载的异步操作。如果加载成功，就调用resolve方法，否则就调用reject方法。