今天看啥  ›  专栏  ›  前端王睿

ES6异步编程之Promise(二)

前端王睿  · 简书  ·  · 2019-08-03 11:52
ES6之Promise对象

前面 我们简单地了解了Promise对象的基本用法,提到了 resolve reject 两个回调函数参数和 then() catch() finally() 这三个原型方法,本文将继续讲讲Promise对象的几个静态方法及其实际运用。

在开始之前我们先来简单了解一下 Promise的基本原理 ,顺便回顾上篇文章所讲的内容。

一、前文回顾与深入

Promise代表一个异步操作,共有三种状态,分别为: pending (进行中) resolved (已成功) rejected (已失败)

当我们创建一个空的Promise对象时,其状态为 pending ;
当执行 resolve() 方法时,其状态由 pending 变为 resolved ;
当执行 reject() 方法时,其状态由 pending 变为 rejected

以上所有状态变化后均不能再次改变其状态,比如执行 resolve() 后再执行 reject() 将不会生效。

另外还需注意的是, resolve reject 由于都只是函数参数,所以都可以写成其他的变量名(例如: res rej ),可根据自己喜好来定。

例如:

console.log(new Promise((res,rej)=>{}));   // 状态为pending
console.log(new Promise((res,rej)=>{res()}));   // 状态为resolved
console.log(new Promise((res,rej)=>{rej()}));   // 状态为rejected

然后我们再来看看 then() catch() then() 的第一个参数是在Promise状态变为 resolved 时调用,而 then() 的第二个参数和 catch() 中的回调函数都是在Promise状态变为 rejected 时调用。
我们来看看下面这个例子。

let get = (url) => {
  return new Promise((res,rej) => {
    $.ajax({
      url: url,  // 接口地址
      type: 'get',
      success: () => {
        console.log("success");
        rej();  // 将 Promise 状态改为rejected
      },
      error: () => {
        console.log("error");
        res();  // 将 Promise 状态改为resolved
      }
    })
  });
};

以上是封装的一个 get() 方法,返回一个Promise对象,可以直接用这个方法来进行get数据请求。

get('https://www.jianshu.com/u/f7e4b9837212')
    .then(() => {
      console.log('请求成功');
    }, () => {
      console.log('请求失败');
    })
    .catch(() => {
      console.log('请求失败');
    });

由于我是在本地环境下请求简书的网站页面,所以实际上是跨域请求,会直接执行$.ajax()中的error方法,因此首先会打印 error 。然后紧接着会继续执行 res() ,直接会将Promise状态变为 resolved ,触发 then() 第一个参数函数执行,因此打印 请求成功 。所以,最终打印结果是:

error
请求成功

同理,如果请求成功,那么最终打印结果将会是:

success
请求失败

通过上面例子我们就可以明白,Promise对象的 then() catch() 执行是与Promise状态有关的,理解这一点对于接下来将要提到的几个静态方法可能会更好理解些。


Promise对象除了 then() catch() finally() 几个原型方法外,还有 resolve() reject() race() all() 这几个静态方法。

一、resolve()

通过 Promise.resolve() 可直接将Promise状态变为 resolved ,相当于 new Promise(res => res()) ,将会触发 then() 第一个参数方法的执行。

例如:




原文地址:访问原文地址
快照地址: 访问文章快照