React 中使用 Promise 时，函数大括号的影响原理是什么？-js教程-PHP中文网

React 中使用 Promise 时，函数大括号的影响原理是什么？

花韻仙語

发布： 2024-11-15 18:42:27

原创

1014人浏览过

React 中使用 Promise 时，函数大括号的影响原理是什么？

react promise 中加/不加函数大括号的影响原理

在 react 中，使用 promise 进行异步操作时，我们经常会遇到在函数前面加上或不加上大括号的情况。这两种写法产生不同的效果，让人迷惑。

问题：有无大括号的区别

下面展示了两种写法的对比：

正确写法（无大括号）：

get: () => new promise((resolve) => {...})

登录后复制

错误写法（有大括号）：

get: () => { new promise((resolve) => {...}) }

登录后复制

这两种写法的区别在于，无大括号的写法将 new promise 作为函数的返回值。而有大括号的写法，会将函数进一步包装一层，导致无法访问 promise 的 resolve 函数。

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

原理解释

当使用无大括号时，get 函数直接返回一个 promise 实例。而当添加大括号时，则创建一个匿名函数，此函数返回 promise 实例。在第二种写法中，匿名函数的返回值被 discard 掉，无法访问 resolve 函数。因此，get 函数实际上没有返回 promise，导致异步操作失败。

示例

以下是包含这两种写法的代码示例：

const getdata = async () => {
  // ...
}

useeffect(() => {
  currentref.current = {
    get: () => new promise((resolve) => { // 正确写法
      getdata().then((res) => {
        // ...
        resolve({ ... });
      }).catch((error) => {
        if (error && error.errorfields) {
          // ...
        }
      });
    })
  };
}, []);

登录后复制

const getData = async () => {
  // ...
}

useEffect(() => {
  currentRef.current = {
    get: () => { // 错误写法，无法访问 resolve 函数
      new Promise((resolve) => {
        getData().then((res) => {
          // ...
          resolve({ ... });
        }).catch((error) => {
          if (error && error.errorFields) {
            // ...
          }
        });
      });
    }
  };
}, []);

登录后复制

因此，在 react 中使用 promise 时，请确保省略函数大括号，以正确返回 promise 实例并实现异步操作。

以上就是React 中使用 Promise 时，函数大括号的影响原理是什么？的详细内容，更多请关注php中文网其它相关文章！