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 的写法更加简洁、易读,并且可以更好地处理异步操作中的错误。

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css