问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

优化js异步网络请求？

头像
unme2xgx
    39826
    头像
    42
      3.8k1623

      老师们好，下面的代码如何优化比较好维护：

      getAccountById(val).then(res=> {
   getUserSourceInfo(res.content.orgSourceId).then(res => {
       console.log("res:", res.content)
  }). catch(res => {})
}) .catch(res => {})

      目前没有想到好的优化方案

      javascriptpromise代码优化异步编程
      阅读 865
      avatarAI BotBETA
      ### 优化方案

1. **使用 `async/await` 语法**：
   `async/await` 可以使异步代码看起来更像同步代码，从而提高可读性和可维护性。

2. **错误处理**：
   将错误处理逻辑集中管理，比如使用 `try/catch` 块。

3. **代码分解**：
   将网络请求逻辑分解成多个函数，使每个函数职责单一，提高代码的可读性和可测试性。

### 优化后的代码

      async function fetchAccountAndUserSourceInfo(val) {

      try {
    const account = await getAccountById(val);
    const userSourceInfo = await getUserSourceInfo(account.content.orgSourceId);
    console.log("res:", userSourceInfo.content);
} catch (error) {
    console.error("Error fetching data:", error);
}

      }

      // 调用函数
      fetchAccountAndUserSourceInfo(someValue);

      
### 解释

- **`async/await`**：使用 `async` 关键字定义异步函数，`await` 关键字等待 Promise 完成，使代码更加直观。
- **错误处理**：使用 `try/catch` 块集中处理可能出现的错误，避免在每个 `.then` 和 `.catch` 中重复错误处理逻辑。
- **代码分解**：将请求逻辑封装在 `fetchAccountAndUserSourceInfo` 函数中，使代码结构更加清晰，便于维护。
      3 个回答
      得票最新
      头像
      申啸天
        601929
        ✓ 已被采纳

        除了其他答主提到的 async/await之外，也可以使用：

        1. 中间件方式

          const finalResult = await fn1(fn2(fn3))
        2. rxjs，管道符

        3. 链式调用

          fn1(args).fn2(args).fn3(args)
        头像
        寸寸青丝愁华年
          700114
          async function Callback<CT>(promise: Promise<CT>) {
  return promise
    .then((data: CT) => [null, data])
    .catch((err) => [err, null])
}


async function getUser() {
  const [acccountError, account] = await Callback(getAccountById(val));
  if (acccountError) {
    return;
  }

  const [useError, userInfo] = await Callback(getUserSourceInfo(account.content.orgSourceId));
  if (useError) {
    return;
  }

  //  写入全局store
  window.localStorage.setItem('user', userInfo)
}
          头像
          42
            3.8k1623
            try {
    const account = await getAccountById(val)
    try {
        const userSourceInfo = await getUserSourceInfo(account.content.orgSourceId)
        console.log('res:', res.content)
    } catch (err) {
        // 错误处理
    }
} catch (err) {
    // 错误处理
}
            查看全部 3 个回答
            推荐问题
            宣传栏