axios的两种请求方法

第一种写法

axios
      .get("http://geek.itheima.net/v1_0/channels")
      .then((response) => {
        console.log(response.data.data.channels);
        setDataList(response.data.data.channels);
        console.log("dataList", dataList);
      })
      .catch((error) => {
        console.err("error", error);
      });   
1
2
3
4
5
6
7
8
9
10

第二种写法

 async function getList() {
      // axios请求
      const res = await axios.get("http://localhost:3004/list");
      
    }
1
2
3
4
5

区别

这两种 Axios 的用法之间有几个区别：

1. Promise vs Async/Await：

   • 第一种用法是使用了 Promise 的链式调用方式，通过 .then() 和 .catch() 处理异步操作的结果和错误。
   • 第二种用法是使用了 async/await，利用 await 关键字等待 Promise 对象的解决。这种写法更简洁直观，更容易理解和维护。

2. 数据处理：

   • 第一种用法在获取数据后，直接在 .then() 方法中处理数据，例如通过 console.log() 输出、将数据设置到组件的状态中等。
   • 第二种用法将数据获取操作封装在了一个异步函数中，并使用 await 关键字等待数据的返回。这种写法使得代码更加模块化，易于复用。

3. 错误处理：

   • 在第一种用法中，错误处理通过 .catch() 方法捕获，并处理错误情况。
   • 在第二种用法中，错误处理可以使用 try/catch 语句来捕获错误。

综上所述，虽然两种写法都可以实现相同的功能，但是第二种 async/await 的写法更加简洁、易读，并且可以更好地处理异步操作中的错误。