前言
Axios 是一个基于 promise 的 异步 ajax 请求库，前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求，负责与后端交互。
Vue、React等框架的出现，促使了Axios轻量级库的出现， react/vue 官方都推荐使用 axios 发 ajax 请求。
因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了
一、安装并使用axios
1.安装
一共三种方式，分别为npm、bower和js引入方式,前两种是在终端中进行install，后者是直接利用axios的url引入来进行使用。
npm方式
npm install axios
bower方式
bower install axios
引入方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.使用方式
首先要先在main.js里面配置axios
import Vue from 'vue' import App from './App.vue' import axios from 'axios' Vue.config.productionTip = false // 全局挂载axios Vue.prototype.$axios=axios new Vue({ axios, render: h => h(App), }).$mount('#app') //若本地项目调试使用 axios.defaults.baseURL = 'http://localhost:8080';
配置成功后即可使用get、post、delete等请求，除此之外，还可以进行并发请求。
get请求
无参get
export default{ methods:{ query(){ this.$axios.get('url').then(res=>{ console.log(res) }) } } }
有参get
//请求格式类似于 http://localhost:8080/goods.json?id=1 this.$axios.get('/url',{ params: { 形参:实参 } }).then(res=>{ console.log(res.data); },err=>{ console.log(err); })
有参get（2）
this.$axios.get(`/url?形参=${实参}`).then(res=>{console.log(res)})
post
this.$axios.post('/url',{ 形参:实参 }).then(res=>{ console.log(res.data); },err=>{ console.log(err); })
并发请求
this.$axios.all([ this.$axios.post(`/url?形参=${实参}`), this.$axios.get('/url') ]).then( this.$axios.spread((goodsRes,classifyRes)=>{ console.log(goodsRes.data); console.log(classifyRes.data); }) )
3.使用proxy解决跨域问题
流程：在vue.config.js配置proxy代理->main.js设置BaseUrl
vue.config.js代理配置
target中放入服务端协议 域名和端口
/api的意思是它对服务器的协议域名端口进行代理
设置后在main.js中的Baseurl放入/api即可
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' // 将 /api 替换为空字符串，这样发送请求时就不需要再加上前缀了 } } } } }
main.js代理配置
axios.defaults.baseURL = '/api';
总结
本文主要从axios库的安装、简单使用以及跨域问题解决进行梳理和展示。
