axios(基于Promise的HTTP客户端) 与 `async` 和 `await` 结合使用

axios 是一个基于 Promise 的 HTTP 客户端，用于简化网络请求。与 async 和 await 结合使用时，它可以使异步网络请求的处理更加简洁和易于理解。

示例

以下是一个使用 axios 和 async/await 的示例，展示如何进行异步网络请求并处理结果：

const axios = require('axios'); // 导入 axios

// 定义一个 async 函数
async function fetchData() {
  try {
    // 发起 GET 请求
    const response = await axios.get('https://jsonplaceholder.typicode.com/users/1');
    
    // 请求成功，处理数据
    console.log('用户数据:', response.data);
  } catch (error) {
    // 捕获请求失败的错误
    console.error('请求失败:', error);
  }
}

console.log('调用 fetchData 前');
fetchData();
console.log('调用 fetchData 后');

解释

1. 导入 axios：引入 axios 库以便使用其功能。
2. 定义 async 函数：
   • 使用 await 等待 axios.get 返回的 Promise 解决。
   • 如果请求成功，response.data 包含从服务器返回的数据。
   • 如果请求失败，catch 块捕获并处理错误。
3. 调用 fetchData：
   • 在调用前和后，console.log 显示的内容帮助你理解代码的执行顺序。

axios 的 async 和 await 使用优势

• 简洁的语法：减少了嵌套的 then 和 catch，使得处理异步操作和错误更加直观。
• 异常处理：try/catch 语法使得错误处理更清晰。

使用 async 和 await 与 axios 结合，可以让你的异步网络请求代码更具可读性和维护性。

在这段代码中，fetchData 函数是一个异步函数，使用 axios 发起 HTTP GET 请求。以下是代码的执行流程和结果：

1. 调用 fetchData 函数：

   • 输出 调用 fetchData 前。

2. fetchData 函数的内部：

   • 发起 GET 请求到 https://jsonplaceholder.typicode.com/users/1。
   • 请求结果（用户数据）将在控制台中显示：用户数据: { ... }，包含用户信息。
   • 如果请求失败，则会在控制台中显示错误信息：请求失败: 错误信息。

3. fetchData 函数执行结束：

   • 输出 调用 fetchData 后。这个输出可能会在请求完成之前就出现，因为 fetchData 是异步的。

总结：调用 fetchData 后 的日志可能会在 用户数据 或 请求失败 日志之前显示，因为 fetchData 的请求是异步的。

下面是你代码的所有输出：

1. **调用 `fetchData` 前**
2. **用户数据:** (包含从 `https://jsonplaceholder.typicode.com/users/1` 返回的用户信息)
3. **调用 `fetchData` 后** 

如果请求失败，则会替代用户数据输出：

1. **调用 `fetchData` 前**
2. **请求失败:** (包含错误信息)
3. **调用 `fetchData` 后**