Vue中的axios介绍

我会带着你远行 2021-07-25 20:57 377阅读 0赞

一，使用axios发送ajax请求

vue本身不具备发送ajax的请求，所以要借助第三方库来完成；

1.在1.x版本发送ajax请求可以使用vue\-resource，不过现在vue\-resource不在维护，官方推荐使用axios代替；

*  vue\-resource官网：[点击进入][Link 1]

2.axios是一个基于Promise用于浏览器和node.js的HTTP客户端，可以用来发送ajax请求；

*  axios官网：[点击进入][Link 2]    [中文说明][Link 3]

![20190919193513257.png][]![2019092121442340.png][]

## 安装axios ##

首先，我们先安装axios工具，如下

npm i axios --save

好了，axios工具安装完成。

## 调整main.js文件 ##

调整后的代码，如下

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import axios from 'axios'
    
    Vue.config.productionTip = false
    //全局注册axios
    Vue.prototype.$http = axios
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

全局注册后，就可以在其他页面按照this.$http这样的方式调用axios方法，不必每个页面引入axios。

例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>01_axios</title>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<button @click="send">使用axios发送ajax请求</button>
    		</div>
    	</body>
    	<script type="text/javascript" src="../js/vue.js" ></script>
    	<script type="text/javascript" src="../js/axios.min.js" ></script>
    	<script>
    		new Vue({
    			methods : {
    				send(){
    					axios({
    						url : '../res/data/user.json',
    						method : 'get'
    					}).then((response)=>{
    						console.log(response.data);
    						console.log(response.data.username);
    					}).catch((error)=>{
    						console.log(error.response.status);
    					}).then(()=>{
    						console.log("无论如何我都会输出,相当于finally");
    					});
    				}
    			}
    		}).$mount("#sikiedu");
    	</script>
    	
    </html>

![20190919193549301.png][]![20190919193556222.png][]

[Link 1]: https://github.com/pagekit/vue-resource
[Link 2]: https://github.com/axios/axios
[Link 3]: https://www.kancloud.cn/yunye/axios/234845
[20190919193513257.png]: https://img-blog.csdnimg.cn/20190919193513257.png
[2019092121442340.png]: /images/20210725/710fcb99aaf549b4b17b2fcf8e8a893c.png
[20190919193549301.png]: https://img-blog.csdnimg.cn/20190919193549301.png
[20190919193556222.png]: /images/20210725/20d28f52c2964da391c7beb4b8fdb8bb.png