问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

优化js异步网络请求？

头像
unme2xgx
    39826
    头像
    42
      3.9k1623

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

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

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

      javascriptpromise代码优化异步编程
      阅读 2.3k
      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 个回答
      得票最新
      头像
      申啸天
        6011029
        ✓ 已被采纳

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

        1. 中间件方式

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

        3. 链式调用

          fn1(args).fn2(args).fn3(args)
        头像
        寸寸青丝愁华年
          727114
          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.9k1623
            try {
    const account = await getAccountById(val)
    try {
        const userSourceInfo = await getUserSourceInfo(account.content.orgSourceId)
        console.log('res:', res.content)
    } catch (err) {
        // 错误处理
    }
} catch (err) {
    // 错误处理
}
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏