【Vue】2-8、Axios 网络请求
cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 注：使用 CDN 链接就可以不需要去下载对应的 js 文件到本地，只需要联网即可使用，可以减少项目的体积
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios</title>
</head>
<body><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>const result = axios({method: 'GET',url: 'http://www.liulongbin.top:3006/api/getbooks'})then(function(books){console.log(books)})</script>
</body>
</html><body><button id="btnGet">get</button><button id="btnPost">post</button><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>document.querySelector('#btnGet').addEventListener('click',async function(){const { data:res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{params: {id: 1}})console.log(res)})document.querySelector('#btnPost').addEventListener('click',async function(){const { data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{name: 'zs',gender: '女'})console.log(res)})</script>
</body>import axios from 'axios'// Vue.prototype.axios = axios
Vue.prototype.$http = axios如果每次使用都要导入一次，那就太麻烦了，也降低了可维护性
可以在 main.js 文件中导入 axios ，这样就不需要在每个组件中都重新导入了
methods: {async postInfo() {const { data: res } = await this.$http.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', age: 20 })console.log(res)}
}// 全局配置 axios 的请求跟路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'缺点：不利于 API 的复用！
一 叶 知 秋，奥 妙 玄 心