前端Vue 3 的组合 API 如何请求数据.docx

前端Vue 3 的组合 API 如何请求数据.docx

《前端Vue 3 的组合 API 如何请求数据.docx》由会员分享，可在线阅读，更多相关《前端Vue 3 的组合 API 如何请求数据.docx（16页珍藏版）》请在冰豆网上搜索。

前端Vue3的组合API如何请求数据

Vue3的组合API如何请求数据

前言

之前在学习ReactHooks的过程中，看到一篇外网文章，通过Hooks来请求数据，并将这段逻辑抽象成一个新的Hooks给其他组件复用，我也在我的博客里翻译了一下：

《在ReactHooks中如何请求数据？

》，感兴趣可以看看。

虽然是去年的文章，在阅读之后一下子就掌握了Hooks的使用方式，而且数据请求是在业务代码中很常用的逻辑。

Vue3已经发布一段时间了，其组合API多少有点ReactHooks的影子在里面，今天我也打算通过这种方式来学习下组合API。

项目初始化

为了快速启动一个Vue3项目，我们直接使用当下最热门的工具Vite来初始化项目。

整个过程一气呵成，行云流水。

npm init vite-app vue3-app

# 打开生成的项目文件夹

cd vue3-app

# 安装依赖

npm install

# 启动项目

npm run dev

我们打开App.vue将生成的代码先删掉。

组合API的入口

接下来我们将通过HackerNewsAPI来获取一些热门文章，HackerNewsAPI返回的数据结构如下：

{

  "hits":

 [

    {

      "objectID":

 "24518295",

      "title":

 "Vue.js 3",

      "url":

 "

    },

    {...},

    {...},

  ]

}

我们通过ui>li将新闻列表展示到界面上，新闻数据从hits遍历中获取。