Salesforce Javascript(一) Promise 浅谈

浪小花 發表於 2020-9-21 09:35:00

本篇参看：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises
<img src="https://img2020.cnblogs.com/blog/910966/202009/910966-20200915212131758-1857624258.png">
 我们在做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的声明
<div class="cnblogs_code">
<pre>new Promise( function(resolve, reject) {...} /* executor */);</pre>
</div>
参数是一个叫做 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.  <code>Promise</code> 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
Promise最终只允许两个结果： pending -> fulfilled 或者是 pending -> rejected。Promise方法封装了一个 then方法，包括两个参数， onfulfilled以及onRejected，这两个参数都是函数类型，当 pending -> fulfilled ,会调用 onfulfilled函数，当pending -> rejected，则会调用 onRejected函数。
<img src="https://img2020.cnblogs.com/blog/910966/202009/910966-20200919133551202-1348216025.png">通过这张图可以看出来， Promise不管是执行了 onFulfillment还是 onRejection，返回的类型仍然是 Promise，这就意味着，可以进行多个 Promise的套用。我们在lwc中通常也会遇见多个调用的方式，比如通过 getRecord获取 account 以后，理论上返回一个 Promise，我们在 then操作时，可以继续请求后台，去获取关联的Opportunity等等，Promise可以实现俄罗斯套娃方式的调用。
<img src="https://img2020.cnblogs.com/blog/910966/202009/910966-20200919133225836-1787937834.png">
解释的很难以理解，来个例子简单了解一下。方法中我们声明了一个Promise，在函数中，调用了 resolve，为了模拟异步操作，使用定时器模拟一下，然后调用 then函数去打印输出。
<div class="cnblogs_code">
<pre>let promise = new Promise(function(resolve,reject) {
setTimeout(() => resolve(2),1000);
});
promise.then((res) => console.log(res));</pre>
</div>
结果如下：初始化的时候， Promise是 Pending状态，当1秒以后，调用了 resolve方法，所以输出了2，此时 promise的状态应该是 fulfilled。
<img src="https://img2020.cnblogs.com/blog/910966/202009/910966-20200919135712502-2093699971.png">
 再来看一下reject的效果
<div class="cnblogs_code">
<pre>let promise = new Promise(function(resolve,reject) {
setTimeout(() => reject(2),1000);
});
promise.then((res) => console.log(res));</pre>
</div>
结果如下：
<img src="https://img2020.cnblogs.com/blog/910966/202009/910966-20200919143122614-319455056.png">
 上图中我们还截图了Promise的方法，Promise原型的方法返回的仍然是 Promise，有三个方法可供选择：then/ catch/ finally。举个例子更好的了解。我们针对 Promise也通常这么书写。
<div class="cnblogs_code">
<pre>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("涨与不涨都能接受，我都爱公司和这份工作");
});</pre>
</div>
结果展示：通过截图可以看到，Promise调用了 resolve，状态变成了fulfilled，调用了 then函数，需要注意的是，不管调用了 then还是catch，都需要调用 finally函数。
<img src="https://img2020.cnblogs.com/blog/910966/202009/910966-20200919150050778-682057475.png">
reject相关的操作：
<div class="cnblogs_code">
<pre>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("涨与不涨都能接受，我都爱公司和这份工作");
});</pre>
</div>
结果展示：
<img src="https://img2020.cnblogs.com/blog/910966/202009/910966-20200919151735832-914614514.png">
看到了 then catch操作是不是想象到了当我们调用后台方法的语法，会有 then 和catch，想的没错，这个操作也是基于 Promise实现。
 二. Promise在lwc中的使用
前面说过，Promise主要用于异步或者加载资源，因为异步lwc已经封装好了，所以说我们在lwc中使用 Promise大部分是加载资源用。比如我们需要使用外部的css / javascript。上传到 static resource以后，如何引入使之在lwc中有效呢？下面的步骤展示如何加载css或者js资源的步骤。
1. 引入 <code class=" language-javascript">loadScript或者loadStyle用于javascript / css资源；</code>
<div class="cnblogs_code">
<pre>import { loadScript, loadStyle } from 'lightning/platformResourceLoader';</pre>
</div>
2.从static resource引入相关的资源
<div class="cnblogs_code">
<pre>import xxx from '@salesforce/resourceUrl/xxx';</pre>
</div>
3. 使用 Promise.all用来执行一组 Promise， loadScript / loadStyle是lwc封装好的方法，用来执行 Promise并且返回类型也是 Promise。 Promise.all方法详情可以查看上面的连接。我们只需要 renderedCallback调用 Promise.all即可。详情参看：https://developer.salesforce.com/docs/component-library/documentation/en/lwc/js_third_party_library总方法如下：
<div class="cnblogs_code">
<pre>// 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');
}
}</pre>
</div>
总结：篇中只是简单描述Promise的介绍以及使用，有错误地方欢迎指出，有不懂欢迎留言。

</div>
<div id="MySignature" role="contentinfo">
作者：zero
博客地址：http://www.cnblogs.com/zero-zyq/
本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接 
如果文章的内容对你有帮助，欢迎点赞~
为方便手机端查看博客，现正在将博客迁移至微信公众号：Salesforce零基础学习，欢迎各位关注。 
来源：https://www.cnblogs.com/zero-zyq/p/13675750.html

頁: [1]

琼殿技术论坛's Archiver

Salesforce Javascript(一) Promise 浅谈