axios的两种请求方法

珊珊而川2024-04-22 16:59

第一种写法

js 复制代码

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);
      });

第二种写法

js 复制代码

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

区别

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

Promise vs Async/Await：
- 第一种用法是使用了 Promise 的链式调用方式，通过 .then() 和 .catch() 处理异步操作的结果和错误。
- 第二种用法是使用了 async/await，利用 await 关键字等待 Promise 对象的解决。这种写法更简洁直观，更容易理解和维护。
数据处理：
- 第一种用法在获取数据后，直接在 .then() 方法中处理数据，例如通过 console.log() 输出、将数据设置到组件的状态中等。
- 第二种用法将数据获取操作封装在了一个异步函数中，并使用 await 关键字等待数据的返回。这种写法使得代码更加模块化，易于复用。
错误处理：
- 在第一种用法中，错误处理通过 .catch() 方法捕获，并处理错误情况。
- 在第二种用法中，错误处理可以使用 try/catch 语句来捕获错误。

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