Vue.js 是一个流行的 JavaScript 前端框架，Vue.js 非常适合用于快速、简单地开发Web应用，尤其适用于单页面应用（SPA）。Vue.js 的核心是 MVVM 模式，即数据与视图分离，通过双向数据绑定来实现数据的与页面的同步更新。在使用 Vue.js 开发 Web 应用时，RESTful API 是一个非常重要的组成部分。
什么是 RESTful API？
REST（Representational State Transfer）是一种软件架构风格，它描述了一个通过 URI 访问的 Web 资源。RESTful API 是一种符合 REST 架构风格，实现了一组 HTTP 方法：GET、POST、PUT、DELETE 等，并遵守一些 RESTful 设计原则的 Web API。RESTful API 处理的是客户端和服务端之间的数据交互请求，通过 API 返回数据。
为什么需要使用 RESTful API？
使用 RESTful API 可以使应用实现前后端分离，让前端开发人员关注用户界面交互与设计，后端开发人员专注于数据的处理和管理。对于企业级的应用，前后端分离更是必不可少的。在很多场合下，前端需要访问后端的数据库，在大多数情况下，不能直接访问数据库，需要通过 RESTful API 来实现访问。
Vue.js 中的 RESTful API 实现
Vue.js 中使用 RESTful API 通常可以通过 axios.js（一个基于 Promise 的 HTTP 库）和 vue-resource（一个Vue.js 官方提供的 AJAX 库）来实现。
下面以 axios.js 为例，讲解如何使用 Vue.js 开发 RESTful API 应用：
- 安装 axios.js
可以通过 npm 命令行工具，安装 axios.js：
--- ------- -----
安装后在 Vue.js 中引入：
------ ----- ---- --------
- 使用 axios.js 获取并展示数据
通过 axios.js 提供的 GET 方法，获取来自 RESTful API 服务端的数据并展示在 Vue.js 应用页面中：
----------
---- ------------------
---------- ------- --- -------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
--- ------------ -- ------- ----------------
---------------------
-----------------------
---------------------------------
-----
--------
--------
------
-----------
--------
------ ----- ---- -------
------ ------- -
----- ------
---- -- -
------ -
------- --
-
--
------- -- -
-----
----------------------------------------
-------------- -- ------------ - ---------------
------------ -- -------------------
--
-------- -
-------- ------- -
------ --- - ----------------------------
-
-
-
---------在 mounted 钩子函数（Vue.js 生命周期中的一个函数），使用 axios.js 提供的 get() 方法访问其中一个 RESTful API 服务端资源 /api/fruits，获取返回的数据列表，通过 this.fruits = response.data，将数据绑定在应用的 fruits 属性上。
总结
在 Vue.js 中使用 RESTful API 非常方便。通过用例，我们可以看到使用 axios.js 来获取并展示 RESTful API 数据只需要几行代码。RESTful API 与前后端分离的方式也是所有大型网站服务的基础。在对 Web 应用进行开发的过程中，不只是要了解 REST API，还应该深入研究 API 设计原则和好的风格。这样可以帮助我们设计出更具扩展性的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6491523e48841e9894f534df