Vue与服务端通讯

最新推荐文章于 2024-04-04 19:17:24 发布

书和咖啡

最新推荐文章于 2024-04-04 19:17:24 发布

阅读量482

点赞数 2

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/ivenqin/article/details/110918332

版权

Vue.js 本身没有提供与服务端通讯的接口，但是通过插件的形式实现了基于 Ajax、Jsonp 等技术的服务端通讯。

目前与服务器通讯的主流方法：

Ajax：在无刷新网页的情况下实现数据的更新，它用起来很方便快捷，但是有一个缺点是在使用时我们需要引入一个 JQuery，引进来之后我们实际上只用了它里面的一个方法，但是却导致引入了两个库，jQuery 太大，因此很少使用。
axios，适用于在 ES5 和 ES6 里面的 promise 出现之后才出现的，它返回一个承诺，易于分离。就是允许我们用 .then 的方法来实现后续的操作，由于是一个承诺因此它的封装也很方便。比如封装一个构造函数，我们需要用的时候就把它实例化一下（使用比较普遍）。
fetch：新出来的一个方法，它的架构和框架都是比较底层的，需要我们进行二次封装（不推荐使用）。它有一个比较大的优点是支持原生跨域。

以 axios 为例，介绍如何实现 Vue 与服务端的通讯。

首先我们需要先引入 axios 代码，可以在 npm 仓库找到：https://www.npmjs.com/package/axios-es6

使用 cdn 方式引入代码：

<script src="https://npmcdn.com/axios/dist/axios.min.js"></script>

使用 npm 方式安装 axios ：

npm install axios

使用 bower 方式安装 axios：

bower install axios

首先我们将下载好的 axios.min.js 文件放入项目的 src 目录中，然后在 HTML 中引入，类似下面这样：

<script src="./src/axios.min.js"></script>

在 Vue 中，发起网络请求，可以放到生命周期中。我们使用 mounted 挂载完成，然后做一个网络请求：

<!DOCTYPE html>
<html>
<head>
<meta charset=

关注

专栏目录