在Vue.js中使用Axios消费休息应用编程接口

原文:https://www . geesforgeks . org/consuming-a-rest-API-with-axios-in-vue-js/

很多时候，在为 web 构建应用程序时，您可能希望使用 Javascript fetch API、Vue resource、jquery ajax API 从 VueJS 中的 API 消费和显示数据，但一种非常流行且最推荐的方法是使用 Axios，这是一种基于承诺的 HTTP 客户端。

Axios 是一个很棒的 HTTP 客户端库。类似于 Javascript 获取 API，默认情况下使用 Promises。它也很容易与 VueJS 一起使用。

创建虚拟企业应用程序并安装模块:

• 步骤 1: 使用以下命令创建一个 Vue 应用程序。

  jshtml
vue create vue-app




• 步骤 2: 使用以下命令安装 Axios 模块。

  jshtml
npm install axios




• 第三步:我们可以使用以下 CDN 链接将 Vue.js 包含到 HTML 中:

  项目目录:会是这样的。

项目结构

index.html

style.css

#app-vue {
    display: flex;
    justify-content: center;
    font-family: 'Karla', sans-serif;
    font-size: 20px;
}
.post {
    width: 300px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    padding: 20px;
    background: #FFEEE4;
    margin: 10px;
}


运行应用程序的步骤:如果已经安装了 Vue 应用程序，可以使用此命令运行应用程序。

npm run serve


输出:如果你使用它作为 CDN，那么复制你的 HTML 的路径并粘贴到你的浏览器上。

我们应用程序的输出

结论:除了消费和显示一个 API，使用 Vue 和 axios 还有很多方法。您还可以与无服务器函数通信，从您必须具有写访问权限的应用编程接口发布/编辑/删除，以及许多其他好处。