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

相关推荐
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
七夜zippoe1 小时前
前端开发中的难题及解决方案
前端·问题
晓13132 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor2 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军2 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到112 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡2 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu2 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂2 小时前
😁深入JS(九): 简单了解Fetch使用
前端