Axios网络请求总结

在实际项目开发中，前端页面所需要的数据往往需要从服务器端获取，这必然涉及与服务器的通信。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>

3.axios一些常用的API总结