10 examples of 'promise in reactjs' in JavaScript

Every line of 'promise in reactjs' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
20export function promiseHOC<TOriginalProps extends PromiseHOC>(component: (React.ComponentType<TOriginalProps>)) {
21
22 type ResultProps = PromiseExternalProps<PromiseComponentProps<TOriginalProps>>;
23
24 return class PromiseComponent extends React.Component<ResultProps, PromiseComponentState<TOriginalProps>> {
25
26 private readonly promiseComponentFunc: PromiseComponentFunc<TOriginalProps>;
27
28 constructor(props: ResultProps) {
29 super(props);
30 this.promiseComponent = this.promiseComponent.bind(this);
31 this.onResolve = this.onResolve.bind(this);
32 this.promiseComponentFunc = Object.assign(this.promiseComponent, {
33 setResult: this.onResolve
34 });
35 props.setPromiseComponent(this.promiseComponentFunc);
36 this.state = {};
37 }
38
39 componentWillReceiveProps(props: PromiseComponentProps<TOriginalProps>) {
40 props.setPromiseComponent(this.promiseComponentFunc);
41 }
42
43 componentWillUnmount() {
44 this.props.setPromiseComponent();
45 }
46
47 promiseComponent(componentProps: PromiseExternalProps<TOriginalProps>) {
48 return new Promise((resolve: (value?: any) => any) => {
49 this.setState({componentProps, resolve});
50 });
51 }
52
53 onResolve(value?: any) {
54 if (typeof(value) === 'function') {
55 value = value();
56 }
57 this.state.resolve && this.state.resolve(value);
58 this.setState({componentProps: undefined, resolve: undefined});
59 }
60
61 render() {
62 return (!this.state.componentProps) ? null : (
63 React.createElement(component, {...this.state.componentProps, setResult: this.onResolve} as any)
64 )
65 }
66 }
67}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

3export default function usePromise(promiseCreator, deps) {
4 // 로딩중 / 완료 / 실패에 대한 상태 관리
5 const [loading, setLoading] = useState(false);
6 const [resolved, setResolved] = useState(null);
7 const [error, setError] = useState(null);
8
9 useEffect(() => {
10 const process = async () => {
11 setLoading(true);
12 try {
13 const resolved = await promiseCreator();
14 setResolved(resolved);
15 } catch (e) {
16 setError(e);
17 }
18 setLoading(false);
19 };
20 process();
21 // eslint-disable-next-line react-hooks/exhaustive-deps
22 }, deps);
23
24 return [loading, resolved, error];
25}
23export function isPromise(maybePromise: any) {
24 return (
25 maybePromise instanceof Promise ||
26 (maybePromise &&
27 typeof maybePromise.then === 'function' &&
28 typeof maybePromise.catch === 'function')
29 )
30}
42function renderToString(React, element) {
43 return new Promise(function (resolve, reject) {
44 let html = '', resolved = false;
45 let dirty = false, inProgress = false;
46 onFailure = (err) => {
47 resolved = true;
48 reject(err);
49 };
50 onSuccess = () => {
51 resolved = true;
52 resolve(html)
53 };
54 function render() {
55 if (resolved) return;
56 dirty = true;
57 if (inProgress) return;
58 inProgress = true;
59 while (dirty && !resolved) {
60 dirty = false;
61 html = React.renderToString(element);
62 }
63 inProgress = false;
64 }
65 store.subscribe(render);
66 render();
67 if (pending === 0) onSuccess();
68 });
69}
8function isPromise(value: any) {
9 if (value !== null && typeof value === 'object') {
10 return value.promise && typeof value.promise.then === 'function';
11 }
12}
5function resolveVnode (component) {
6 return new Promise(resolve => {
7 const intv = setInterval(() => {
8 if (isElement(component.vnode)) {
9 clearInterval(intv)
10 resolve(component.vnode)
11 }
12 }, 0)
13 })
14}
65function reactReplay(React) {
66 const serialized = serialize()
67 return props => <script dangerouslySetInnerHTML={{ __html: serialized }} />
68}
57function resolvePromise(promise2, x, resolve, reject) {
58 // promise 执行不能返回自己,会死循环
59 if (promise2 === x) {
60 return reject(new TypeError('循环引用'));
61 }
62
63 // called:只第一次有效,后面的忽略
64 let then, called;
65
66 if (x != null && ((typeof x == 'object' || typeof x == 'function'))) {
67 // 如果 x 是一个对象或一个函数
68 try {
69 then = x.then;
70 if (typeof then == 'function') {
71 // 如果 then 是一个函数,以 x 为 this 调用 then 函数
72 // 第一个参数是 resolvePromise,第二个参数是rejectPromise
73 then.call(x, function (y) {
74 if (called) return;
75 called = true;
76 // 继续递归
77 resolvePromise(promise2, y, resolve, reject);
78 }, function (r) {
79 if (called) return;
80 called = true;
81 // 直接拒绝
82 reject(r);
83 });
84 } else {
85 // 如果 then 不是一个函数,则以 x 为值 fulfill promise。
86 resolve(x);
87 }
88 } catch (e) {
89 if (called) return;
90 called = true;
91 // 如果抛出了异常,则以这个异常做为原因将 promise 拒绝
92 reject(e);
93 }
94 } else {
95 // 其他情况直接以 x 为值 fulfill promise
96 resolve(x);
97 }
98}
46function usePromise(promise, inputs) {
47 const [{ error, result, state }, dispatch] = useReducer(reducer, {
48 error: undefined,
49 result: undefined,
50 state: states.pending
51 });
52
53 useEffect(() => {
54 promise = resolvePromise(promise);
55
56 if (!promise) {
57 return;
58 }
59
60 let canceled = false;
61
62 dispatch({ type: states.pending });
63
64 promise.then(
65 result => !canceled && dispatch({
66 payload: result,
67 type: states.resolved
68 }),
69 error => !canceled && dispatch({
70 payload: error,
71 type: states.rejected
72 })
73 );
74
75 return () => {
76 canceled = true;
77 };
78 }, inputs);
79
80 return [result, error, state];
81}
36function _load_promise2() {
37 return _promise2 = require('./promise.js');
38}

Related snippets