Vue.js 特有的一种ajax——axios

最新推荐文章于 2023-07-19 17:30:30 发布

edison_Kwok_gh

最新推荐文章于 2023-07-19 17:30:30 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/guohao_1/article/details/89951087

版权

面试：你懂什么是分布式系统吗？Redis分布式锁都不会？>>>

1 vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。
vue-resource的github:https://github.com/pagekit/vue-resource

2 axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 axios的github:https://github.com/axios/axio

2.1 引入axios

首先就是引入axios,如果你使用es6，只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.2 get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){
	console.log(response);
})
.catch(function(err){
	console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
	params:{
		ID:12345
	}
})
.then(function(response){
	console.log(response);
})
.catch(function(err){
	console.log(err);
});

2.3 post请求

axios.post('/user',{
	firstName:'Fred',
	lastName:'Flintstone'
})
.then(function(res){
	console.log(res);
})
.catch(function(err){
	console.log(err);
});

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])