Salesforce Javascript(一) Promise 浅谈

本篇参看：

//developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

//developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises

 我们在做lwc开发的时候，必须要查看lwc的开发文档。上图我们可以经常用到，lwc的wire adapter提供的创建记录的方法，我们可以看到return的内容是一个Promise对象，而且文档中涉及到异步创建或者加载文档等方法通常说都返回一个Promise对象，对于前端不好的小伙伴可能想的是， Promise是啥怎么用呢？

一. Promise是什么

说起Promise定义和应用以前，我们先从他的汉语以及日常业务场景进行简单的解释。

Promise 的中文可以解释为承诺，做一个简单的业务场景分析。
年会了，老板喝酒的时候和你碰了个杯，小张啊，今年表现不错，10天以后就是绩效评定，今年必须给你升职加薪。

对于此时的你来说，两种想法。

A. 老板这么器重我啊，马上就要升职加薪、迎娶白富美、走上人生巅峰，想想还有点小激动。我要更加努力奋斗balabala。

B. 可能老板喝多了，算了，我还是安安静静的搬好我的砖吧。

所以说承诺可能具有以下的情况。

1. 承诺将给你一个保证，这个保证自己做别人做怎么实行，不清楚也不重要，重要的是他给了你承诺，你可以在这个承诺的基础上做你计划的事情。上面的例子中，老板给了你承诺，不管是HR联系你还是老板找你谈，不重要，重要的是老板给你了一个约定，给你升职加薪。
2. 既然是一个承诺，他就会有两种情况，要么遵守，要么违约。
3. 虽然我们不知道这个承诺当时的状态，但是我们可以计划一下我们期望从这个承诺达到什么东西，也需要去计划一下如果违背了承诺我们怎么处理。比如涨薪以后买个手机或者出去旅游等等，如果不涨薪就安心搬砖或者跳槽等等。
4. 承诺应该具有时效性。老板10天以内没有联系你，半年以后老板想起来了，哎呀，我之前忘了，今年一定要给你升职加薪。这对于你来说已经不重要了，因为已经过了时效，默认就应该认为是违约了。
5. 承诺通常都不是当时就一下子做的，通常都应该有一定时间进行异步操作。

 所以我们通过中文的了解的现实承诺的场景，去了解一下 js中的Promise的概念。

先看一下MDN上面对于Promise的解释：Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.也就是说 Promise通常用于异步操作或者加载资源或者IO等等非同步有阻塞的操作。我们对 Promise有了一个大概的使用场景的了解，那么 Promise如何声明如何使用呢，接下来慢慢展开。先看一下 Promise的声明

new Promise( function(resolve, reject) {...} /* executor */  );

参数是一个叫做 executor的函数，包括了两个参数， resolve 以及reject，当然这两个参数也都是函数。当 Promise创建以后，会立即执行  executor函数，此时的状态为pending，executor通常操作异步函数，当异步的结果回来有两种可能，成功或者失败。成功的情况下会回调 resolve并且将promise的状态更改为fulfilled，失败的情况下会将Promise的状态更改为rejected并且调用 reject函数，如果异步抛出了异常，则Promise的状态变成 rejected，executor的返回值将被忽略。

这样描述乱乱的，将这个分拆一些细节点。

1.  Promise只拥有三种状态： pending （初始状态）、 fulfilled(操作成功)、rejected(操作失败)。其中fulfilled & rejected也可以概括成settled（已定型）。

2.  Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。

Promise最终只允许两个结果： pending -> fulfilled 或者是 pending -> rejected。Promise方法封装了一个 then方法，包括两个参数， onfulfilled以及onRejected，这两个参数都是函数类型，当 pending -> fulfilled ,会调用 onfulfilled函数，当pending -> rejected，则会调用 onRejected函数。

通过这张图可以看出来， Promise不管是执行了 onFulfillment还是 onRejection，返回的类型仍然是 Promise，这就意味着，可以进行多个 Promise的套用。我们在lwc中通常也会遇见多个调用的方式，比如 通过 getRecord获取 account 以后，理论上返回一个 Promise，我们在 then操作时，可以继续请求后台，去获取 关联的Opportunity等等，Promise可以实现俄罗斯套娃方式的调用。

解释的很难以理解，来个例子简单了解一下。方法中我们声明了一个Promise，在函数中，调用了 resolve，为了模拟异步操作，使用定时器模拟一下，然后调用 then函数去打印输出。

let promise = new Promise(function(resolve,reject) {
    setTimeout(() => resolve(2),1000);
});
promise.then((res) => console.log(res));

结果如下：初始化的时候， Promise是 Pending状态，当1秒以后，调用了 resolve方法，所以输出了2， 此时 promise的状态应该是 fulfilled。

 再来看一下reject的效果

let promise = new Promise(function(resolve,reject) {
    setTimeout(() => reject(2),1000);
});
promise.then((res) => console.log(res));

结果如下：

 上图中我们还截图了Promise的方法，Promise原型的方法返回的仍然是 Promise，有三个方法可供选择：then/ catch/ finally。举个例子更好的了解。我们针对 Promise也通常这么书写。

let bossPromise = new Promise(function(resolve, reject) {
  resolve({
      title: "TL",
      increase: "1000"
    });
});
bossPromise.then(function(result) {
  console.log("哇，我涨薪了，好开心啊 ，老板说我涨了" + JSON.stringify(result));
});
bossPromise.catch(function(reason) {
  console.log("没有涨薪，因为老板说我：" + reason);
});
bossPromise.finally(function() {
  console.log("涨与不涨都能接受，我都爱公司和这份工作");
});

结果展示：通过截图可以看到，Promise调用了 resolve，状态变成了fulfilled，调用了 then函数，需要注意的是，不管调用了 then还是catch，都需要调用 finally函数。

reject相关的操作：

let bossPromise = new Promise(function(resolve, reject) {
  reject({
      reason : '能力还得慢慢提高'
    });
});
bossPromise.then(function(result) {
  console.log("哇，我涨薪了，好开心啊 ，老板说我涨了" + JSON.stringify(result));
});
bossPromise.catch(function(reason) {
  console.log("没有涨薪，因为老板说我：" + JSON.stringify(reason));
});
bossPromise.finally(function() {
  console.log("涨与不涨都能接受，我都爱公司和这份工作");
});

结果展示：

看到了 then catch操作是不是想象到了 当我们调用后台方法的语法，会有 then 和catch，想的没错，这个操作也是基于 Promise实现。

 二. Promise在lwc中的使用

前面说过，Promise主要用于异步或者加载资源，因为异步lwc已经封装好了，所以说我们在lwc中使用 Promise大部分是加载资源用。比如我们需要使用外部的css / javascript。上传到 static resource以后，如何引入使之在lwc中有效呢？下面的步骤展示如何加载css或者js资源的步骤。

1. 引入 loadScript或者loadStyle用于javascript / css资源；

import { loadScript, loadStyle } from 'lightning/platformResourceLoader';

2.从static resource引入相关的资源

import xxx from '@salesforce/resourceUrl/xxx';

3. 使用 Promise.all用来执行一组 Promise， loadScript / loadStyle是lwc封装好的方法，用来执行 Promise并且返回类型也是 Promise。 Promise.all方法详情可以查看上面的连接。我们只需要 renderedCallback调用 Promise.all即可。详情参看：//developer.salesforce.com/docs/component-library/documentation/en/lwc/js_third_party_library总方法如下：

// libsD3.js
/* global d3 */
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import D3 from '@salesforce/resourceUrl/d3';
import DATA from './data';

export default class LibsD3 extends LightningElement {
    svgWidth = 400;
    svgHeight = 400;

    d3Initialized = false;

    renderedCallback() {
        if (this.d3Initialized) {
            return;
        }
        this.d3Initialized = true;

        Promise.all([
            loadScript(this, D3 + '/d3.v5.min.js'),
            loadStyle(this, D3 + '/style.css')
        ])
            .then(() => {
                this.initializeD3();
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading D3',
                        message: error.message,
                        variant: 'error'
                    })
                );
            });
    }

    initializeD3() {
        console.log('test');
    }
}

总结：篇中只是简单描述Promise的介绍以及使用，有错误地方欢迎指出，有不懂欢迎留言。

Tags:

VirMach 便宜 VPS

QNews

QNews