Vue（05）——axios异步通信
程序员文章站
2022-07-12 19:28:38
...
Vue（05）——axios异步通信
1、axios概述
axios是一个开源的可以用在浏览器和node.js的异步通信框架，它的作用就是实现ajax异步通信，其功能特点如下：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
摘自axios中文文档：http://www.axios-js.com/zh-cn/docs/
为什么要使用axios
由于vue是一个视图层框架，并且作者严格遵守Soc（关注度分离原则），所以vue并不包含ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本后就停止了对该插件的维护并推荐了axios框架。少用jquery，因为它操作Dom太频繁了！
2、第一个axios小程序
我们开发的接口大部分都是json格式，可以现在项目里模拟一段JSON数据，数据内容如下：创建一个名为data.json的文件并填入下面的内容，放在项目的个目录下。
{
"name": "狂神说java",
"url": "http://baidu.com",
"page": 1,
"isNonProfit":true,
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": 4399,
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
再写一个测试的html页面：
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
<!DOCTYPE html >
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
[v-clock]{
display: none;
}
</style>
<body>
<script type="text/javascript"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<div id="app" v-clock>
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
<div>{{info.address.city}}</div>
<div>{{info.address.country}}</div>
<a v-bind:href="info.url">个人博客</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data(){
return{
info:{
name: null,
url: null,
address: {
//请求反回参数必须和json字符串中的一样
street: null,
city: null,
country: null
}
}
}
},
mounted(){
axios.get('../data.json').then(response=>(this.info=(response.data)));
}
});
</script>
</body>
</html>
上一篇： ftp
下一篇： 树莓派和步进电机的故事