10 examples of 'promise in reactjs' in JavaScript

20
export function promiseHOC(component: (React.ComponentType)) {
21
22
    type ResultProps = PromiseExternalProps>;
23
24
    return class PromiseComponent extends React.Component> {
25
26
        private readonly promiseComponentFunc: PromiseComponentFunc;
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) {
40
            props.setPromiseComponent(this.promiseComponentFunc);
41
        }
42
43
        componentWillUnmount() {
44
            this.props.setPromiseComponent();
45
        }
46
47
        promiseComponent(componentProps: PromiseExternalProps) {
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
}

3
export 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
}

23
export function isPromise(maybePromise: any) {
24
  return (
25
    maybePromise instanceof Promise ||
26
    (maybePromise &&
27
      typeof maybePromise.then === 'function' &&
28
      typeof maybePromise.catch === 'function')
29
  )
30
}

42
function 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
}

8
function isPromise(value: any) {
9
    if (value !== null && typeof value === 'object') {
10
        return value.promise && typeof value.promise.then === 'function';
11
    }
12
}

5
function 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
}

65
function reactReplay(React) {
66
  const serialized = serialize()
67
  return props =>

57
function 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
}

46
function 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
}

36
function _load_promise2() {
37
  return _promise2 = require('./promise.js');
38
}