vue----使用 Axios 实现异步通信_app

概述什么是 Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF（跨站请求伪造） GitH 什么是 Axios

Axios 是一个开源的可以用在浏览器端和 NodeJs 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

从浏览器中创建 XMLhttpRequests 从 node.Js 创建 http 请求支持 Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JsON 数据客户端支持防御 XSRF（跨站请求伪造）

GitHub：https://github.com/axios/axios

为什么要使用 Axios

由于 Vue.Js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.Js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架

第一个 Axios 应用程序

咱们开发的接口大部分都是采用 JsON 格式，可以先在项目里模拟一段 JsON 数据，数据内容如下：

{  "name": "广州千锋","url": "http://www.funtl.com","page": 88,"isNonProfit": true,"address": {    "street": "元岗路.","city": "广东广州","country": "中国"  },"links": [    {      "name": "Google","url": "http://www.Google.com"    },{      "name": "BaIDu","url": "http://www.baIDu.com"    },{      "name": "SoSo","url": "http://www.soSo.com"    }  ]}

　　创建一个名为 data.Json 的文件并填入上面的内容，放在项目的根目录下，如图所示：

创建 HTML

<div ID="vue">    <div>名称：{{info.name}}</div>    <div>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>    <div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div></div>

　　注：在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定

引入 Js 文件

<script src="https://cdn.Jsdelivr.net/npm/[email protected]/dist/vue.Js"></script><script src="https://unpkg.com/axios/dist/axios.min.Js"></script>

JavaScript

<script type="text/JavaScript">    var vm = new Vue({        el: ‘#vue‘,data() {            return {                info: {                    name: null,address: {                        country: null,city: null,street: null                    },url: null                }            }        },mounted() {            axios                .get(‘data.Json‘)                .then(response => (this.info = response.data));        }    });</script>

　　使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中

数据对象

这里的数据结构与 JsON 数据结构是匹配的

info: {    name: null,address: {        country: null,street: null    },url: null}

调用 get 请求

调用 axios 的 get 请求并自动装箱数据

axios    .get(‘data.Json‘)    .then(response => (this.info = response.data));

完整的 HTML

<!DOCTYPE HTML><HTML><head>    <Meta charset="UTF-8">    <Title>网络篇 Axios</Title>    <script src="https://cdn.Jsdelivr.net/npm/[email protected]/dist/vue.Js"></script>    <script src="https://unpkg.com/axios/dist/axios.min.Js"></script></head><body><div ID="vue">    <div>名称：{{info.name}}</div>    <div>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>    <div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div></div><script type="text/JavaScript">    var vm = new Vue({        el: ‘#vue‘,mounted() {            axios                .get(‘data.Json‘)                .then(response => (this.info = response.data));        }    });</script></body></HTML>

总结

以上是内存溢出为你收集整理的vue----使用 Axios 实现异步通信全部内容，希望文章能够帮你解决vue----使用 Axios 实现异步通信所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1055473.html