[英]How to wait for javascript promise to return value before continuing execution?
I have written a util class, which is a wrapper around promise based vendor library. 我编写了一个util类,它是基于Promise的供应商库的包装。 My application will call this class (within App & Actions) to perform certain operations. 我的应用程序将调用此类(在App&Actions中)以执行某些操作。
I am currently dealing with a scenario where my code needs to know the return value of promise within the Util class before proceeding to the next step. 我目前正在处理一个方案,在该方案中,我的代码需要在继续进行下一步之前了解Util类中promise的返回值。 How can I do that? 我怎样才能做到这一点?
The following is the tree structure of my code: 以下是我的代码的树形结构:
├── index.html
├── package-lock.json
├── package.json
├── scripts
│ ├── vendor_script.min.js
├── src
│ ├── actions
│ │ └── index.js
│ ├── common
│ │ └── js
│ │ └── WrapperAroundVendorScript_Utils.js
│ ├── components
│ │ └── app.js
│ ├── index.js
│ └── reducers
│ └── index.js
├── style
│ └── style.css
├── webpack.config.js
├── yarn-error.log
└── yarn.lock
Here, vendor_script.min.js is a vendor supplied JS library that uses JS promises to perform various actions. 在这里,vendor_script.min.js是供应商提供的JS库,它使用JS承诺执行各种操作。 I have written a util class (WrapperAroundVendorScript_Utils.js) to abstract out the implementation details of vendor library. 我编写了一个util类(WrapperAroundVendorScript_Utils.js),以抽象出供应商库的实现细节。
WrapperAroundVendorScript_Utils.js WrapperAroundVendorScript_Utils.js
let instance = null;
class VendorUtils {
constructor (){
const config = {
some: value,
}
this._vendor = typeof window !== 'undefined' && window.vendor ? window.vendor : require([PATH]);
this._vendor.config = config;
};
static getInstance() {
if(typeof instance == "undefined" || !instance){
instance = new VendorUtils();
}
return instance;
}
doSomething(param1, param2) {
this._vendor.domSomething(param1 + param2);
.then(retVal => {
return {retVal};
});
};
doSomethingElse(param1, param2) {
this._vendor.domSomethingElse(param1 + param2);
.then(retVal => {
return {retVal};
});
};
}
module.exports.VendorUtils = VendorUtils;
app.js app.js
import React, { Component } from 'react';
import {VendorUtils} from '../common/js/VendorUtils';
export default class App extends Component {
clicked(){
let utilsInstance = VendorUtils.getInstance();
let x = utilsInstance.doSomething('a','b');
let y = utilsInstance.doSomethingElse(x,'a');
// call action with values received in previous steps
}
render() {
return (
<div>
<button type='button' onClick={this.clicked}>Click Me!</button>
<button type='button' onClick={this.clicked}>Click Me!</button>
<button type='button' onClick={this.clicked}>Click Me!</button>
</div>
);
}
}
PS: I need such synchronous behavior because there are multiple child/nested/sub components within the class that will be calling such common functions. PS:我需要这种同步行为,因为类中有多个子/嵌套/子组件将调用此类通用函数。
This is a perfect example of where you would want to use async
/ await
这是您要在哪里使用async
/ await
的完美示例
async clicked() {
const utilsInstance = VendorUtils.getInstance();
const x = await utilsInstance.doSomething('a','b');
const y = await utilsInstance.doSomethingElse(x,'a');
...
}
There are some problems with your doSomething functions: doSomething函数存在一些问题:
doSomething(param1, param2) {
this._vendor.domSomething(param1 + param2);
.then(retVal => {
return {retVal};
});
};
Consider to change your do something functions a bit: 考虑稍微改变一下功能:
doSomething(param1, param2) {
// return the promise
return this._vendor.domSomething(param1 + param2)
// maybe you don't need this part at all if you want to get only the value instead of {retVal: value} object
.then(retVal => {
// if you do async operations here make sure you returned a new
// promise here instead of object, in that case you would need
// another .then block to process internal promise that you
// would create inside this .then block
return {retVal};
});
};
that way, inside your async "clicked" function you would be able to use await for returned promises: 这样,在您的异步“单击”函数中,您将可以使用await来返回承诺:
async clicked() {
let utilsInstance = VendorUtils.getInstance();
// you can check what doSomething returns here - it would be a promise
let doSomethingPromise = utilsInstance.doSomething('a','b');
// await a previously saved promise to get a value
let x = await doSomethingPromise;
// obviously you still can await promise in one sentence
let y = await utilsInstance.doSomethingElse(x,'a');
// call action with values received in previous steps
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.