Vue.js 自己没有提供与服务端通讯的接口，可是通过插件的形式实现了基于 Ajax、Jsonp 等技术的服务端通讯。与服务器通讯现在与服务器通讯的主流方法：Ajax：在无刷新网页的情况下实现数据的更新，它用起来很利便快捷，可是有一个缺点是在使用时我们需要引入一个 JQuery，引进来之后我们实际上只用了它内里的一个方法，可是却导致引入了两个库，jQuery 太大，因此很少使用。axios，适用于在 ES5 和 ES6 内里的 promise 泛起之后才泛起的，它返回一个答应，易于分散。就是允许我们用 .then 的方法来实现后续的操作，由于是一个答应因此它的封装也很利便。
好比封装一个结构函数，我们需要用的时候就把它实例化一下（使用比力普遍）。fetch：新出来的一个方法，它的架构和框架都是比力底层的，需要我们举行二次封装（不推荐使用）。
它有一个比力大的优点是支持原生跨域。使用axios实现与服务器通讯以 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="utf-8"><title>Vue的学习(9xkd.com)</title><script src="./src/vue.min.js"></script><script src="./src/axios.min.js"></script></head><body> <div id="app"> <div>侠课岛接待你</div> </div> <script> var app = new Vue({ el:"#app", mounted() { // 传入URL axios.get('url') // url // 执行操作 .then(function(response) { // 接受一个回调 console.log(response); // 打印响应 }) // 捕捉错误 .catch(function(err) { console.error(err); // 打印错误信息 }) } }) </script></body></html>post 请求是带参数的：mounted() { axios.post('url', data) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });}除了在生命周期中使用，我们也可以 methods 中使用，例如在 methods 中界说一个 getData 函数：<body> <div id="app"> <button v-on:click="getData">点击</button> </div> <script> var app = new Vue({ el:"#app", methods:{ getData: function(){ axios.post('url',data) // url是链接，data是数据 // 执行操作 .then(function(response) { // 接受一个回调 console.log(response); // 打印响应 }) // 捕捉错误 .catch(function(err) { console.error(err); // 打印错误信息 }) } } }) </script></body>解决跨域问题在项目的 config 目录下的 index.js 文件中，设置 proxyTable：proxyTable: { '/api': { target: 'http://localhost:8080/', //目的接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '' //重写接口，后面可以使重写的新路径，一般不做更改 } }},如图所示：链接：https://www.9xkd.com/。
本文来源：开云体育官方首页网站-www.bxtlngy.com
点击咨询
065-321993114
