原来这才是学习axios的正确姿势（安装、使用、跨域代理一站式解决）

---

前言

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库的安装、简单使用以及跨域问题解决进行梳理和展示。。