在实际项目开发中,前端页面所需要的数据往往需要从服务器端获取,这必然涉及与服务器的通信。Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。Axios 在浏览器端使用XMLHttpRequests发送网络请求,并能自动完成JSON数据的转换。
官网地址:https://www.axios-http.cn/
1.版本说明
axios主要有两个版本系列,分别是0.x版本和0.21.x版本。
0.x版本:这是较旧的版本,支持浏览器和Node.js环境。在这个版本中,Axios使用基于XHR(XMLHttpRequest)的传统AJAX请求,并且使用回调函数来处理响应结果
0.21.x版本:这是更新的版本,同样支持浏览器和Node.js环境。在这个版本中,Axios使用基于浏览器的Fetch API和Node.js的http模块进行请求。它使用Promise和async/await语法来处理响应结果,使得代码更加简洁和易读。这个版本要求Node.js版本不低于10.0.0,并且需要使用支持Promise和Fetch API的浏览器。
Axios的不同版本之间有一些功能和API的变化。例如0.5.1和0.5.4版本将具有相同的API,但0.6.0版本将会有重大变化。
2.vue引入axios
首先先按照axios到node_modules中
npm install axios@0.21.1
其次在main.js中引入
import axios from 'axios'
//配置请求根路径
axios.defaults.baseURL="http://127.0.0.1:8789";
//将axios作为全局的自定义属性,每个组件可以在内部直接访问
Vue.prototype.$http = axios;
最后就可以在vue组件中发起使用
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<!-- <router-view/> -->
<First/>
<Movie title="金刚狼" rating="8.8"></Movie>
<Movie v-for="movie in movies" :title="movie.title" :rating="movie.rating" :key="movie.id" ></Movie>
<Table :tableData="tbdata"></Table>
</div>
</template>
<script>
import First from '@/components/First.vue'
import Movie from '@/components/Movie.vue'
import Table from '@/components/Table.vue'
export default {
name: 'App',
data:function(){
return {
movies:[
{id:1,title:"金刚狼",rating:"8.8"},
{id:2,title:"金刚狼2",rating:"8.9"},
{id:3,title:"金刚狼3",rating:"9.0"},
],
tbdata:[]
}
},
created(){
console.log('App.vue is created');
this.$http.get("/tblEmployee/getAll").then((response)=>{
console.log(response.data);
this.tbdata=response.data;
}).catch(function(err){
console.log(err);
}).then(
function(){
console.log("无论如何都要执行一下")
}
)
},
components:{
First,
Movie,
Table
}
}
</script>