【Vue】Axios异步通信

最新推荐文章于 2022-07-29 11:28:05 发布

秋秋秋叶

最新推荐文章于 2022-07-29 11:28:05 发布

阅读量275

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_44421143/article/details/122179537

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Axios作为Vue.js应用中的异步通信工具，详细讲解了Axios的基本概念、使用原因及如何通过Axios进行JSON数据的获取和页面渲染。通过一个实际例子展示了如何在Vue组件中使用Axios获取JSON数据并在页面上展示，包括数据绑定和钩子函数的使用。

摘要由CSDN通过智能技术生成

文章目录

十、Axios异步通信

十、Axios异步通信

10.1 什么是Axios

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

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API [JS中链式编程]
拦截请求和相应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF （跨站请求伪造）

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

中文文档： http://www.axios-js.com/

10.2 为什么要使用Axios

由于Vue.js是一个视图层框架，并且作者严格遵守SOC（关注度分离原则），所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为它的DOM操作太频繁。

10.3 第一个Axios应用程序

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

创建一个名为data.json的文件并填入以下内容，放在项目的根目录下。

{
  "name": "我的博客",
  "url": "https://blog.csdn.net/weixin_44421143?spm=1000.2115.3001.5343",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "向阳路",
    "city": "河南新乡",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    },
    {
      "name": "CSDN",
      "url": "https://www.csdn.net/"
    }
  ]
}

Json字符串，要请求到前端去接收。

首先要通过在线CDN的方式把这个axios.js的包导入进来。(把Vue的也导进来)

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

钩子函数mounted(){}

<body>

<div id="vue">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        mounted(){  //钩子函数  链式编程	ES6新特性
            axios.get('data.json').then(response=>(console.log(response.data)));
        }	//如果和data.json不在同一级目录，还要将相对路径写正确
    })
</script>

</body>

在这里插入图片描述

再把获取到的数据渲染到页面上去

我们这时就不再是console.log()了，而是把get到的data.json数据返回到我们Vue实例的data属性当中去。我们此处不是用的vm的data属性，而是data()方法去接收返回到的数据。

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data() {
            return{
                //请求的返回参数格式，必须和json字符串一样.“摆格式”
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted(){  //钩子函数  链式编程    ES6新特性
            axios.get('./data.json').then(response=>(this.info=response.data));
        }
    })
</script>

我们通过.then(response=>(this.info = response.data))，把data.json文件中的json对象赋给了info。

然后通过一个固定的写法

data(){
	return{
	
	}
}

来获取response返回的数据。

在里面再定义info。注意此处，你要接收什么数据，一定要和json中的一样，不想接收的可以不写上去，但是想接收的要和json中的一样。可以理解为先“摆格式”等待json的传入。

然后我们测试一下，看看info里面的数据是不是能拿到前端显示：

<div id="vue">
    <div>{{info.name}}</div>
</div>

在这里插入图片描述

拿到了info.name，那么其他的数据肯定也都能拿到。

再多写几个数据。

<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <a v-bind:href="info.url">点我</a>
</div>

在这里插入图片描述

注意：

如果你的a标签是这样写的

<a>{{info.url}}</a>

那么它只会认为是一个纯文本字符串。

在这里插入图片描述

如果是这样写的

<a href="info.url">点我</a>

它会认为是一个叫做“/info.url”的路径跳转。

必须要用v-bind和Vue实例中的属性去绑定。

可以理解为除了div标签可以用{{}}去绑定数据之外，其他标签一律都要使用v-bind做数据绑定才可以。

秋秋秋叶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】Axios异步通信

文章目录十、Axios异步通信10.1 什么是Axios10.2 为什么要使用Axios10.3 第一个Axios应用程序十、Axios异步通信10.1 什么是Axios Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用就是实现AJAX异步通信，其功能特点如下：从浏览器中创建XMLHttpRequests从node.js创建http请求支持Promise API [JS中链式编程]拦截请求和相应转换请求数据和响应数据取消请求自动转换JSON数据客户端
复制链接

扫一扫