axios的两种请求方法

第一种写法

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 的用法之间有几个区别:

  1. Promise vs Async/Await:

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

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

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

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

相关推荐
会豪38 分钟前
Electron-Vite (一)快速构建桌面应用
前端
中微子41 分钟前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶42 分钟前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子43 分钟前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23331 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_2 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit2 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天2 小时前
ts中的函数重载
前端