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