第一种写法
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 对象的解决。这种写法更简洁直观,更容易理解和维护。
- 第一种用法是使用了 Promise 的链式调用方式,通过
-
数据处理:
- 第一种用法在获取数据后,直接在
.then()
方法中处理数据,例如通过console.log()
输出、将数据设置到组件的状态中等。 - 第二种用法将数据获取操作封装在了一个异步函数中,并使用
await
关键字等待数据的返回。这种写法使得代码更加模块化,易于复用。
- 第一种用法在获取数据后,直接在
-
错误处理:
- 在第一种用法中,错误处理通过
.catch()
方法捕获,并处理错误情况。 - 在第二种用法中,错误处理可以使用
try/catch
语句来捕获错误。
- 在第一种用法中,错误处理通过
综上所述,虽然两种写法都可以实现相同的功能,但是第二种 async/await 的写法更加简洁、易读,并且可以更好地处理异步操作中的错误。