axios小记之基本用法

HTTP最基本的请求就是get请求和post请求，使用axios发送get请求的调用格式如下：

axios.get('/book?id=1')
	.then(function (response){
		console.log(response);
	})
	.catch(function (error){
		console.log(erroe);
	});

get方法接收一个URL作为参数，如果有要发送的数据，则以查询字符串的形式附加在URL后面。当服务器发回成功响应（状态码是2XX）时调用then方法中的回调，可以在该回调函数中对服务端的响应进行处理；如果出现错误，则会调用catch方法中的回调，可以在该回调函数中对错误信息进行处理，并向用户提示错误。

post请求是在请求体中发送数据，因此，axios的post方法比get方法多了一个参数，该参数是一个对象，对象的属性就是要发送的数据。代码如下：

axios.post('/login',{
	username: 'zhangsan',
	password: '123456',
})
	.then(function (response){
		console.log(response);
	})
	.catch(funtion (error){
		console.log(error);	
	})

接收到服务器的响应信息之后需要对响应的信息进行处理。例如，设置用于组件渲染或者更新数据。回调函数中的response是一个对象，该对象常用的属性是data和status，前者用于获取服务器发回的响应数据，后者是服务器发送的HTTP状态码。response对象的完整属性如下所示：

{
	//data是服务器发回的响应数据
	data: {},

	//status是服务器响应的HTTP状态码
	status: 200,

	//statusText是服务器响应的HTTP状态描述
	statusText: 'OK',

	//headers是服务器响应的消息报头
	headers:{},

	//config是为请求提供的配置信息
	config: {},

	//request是生成此响应的请求
	request: {}

成功响应之后，获取的数据的一般处理形式如下：

axios.get('/book?id=1')
	.then(function (response){
		if(response.status===200){
			this.book = response.data;
		}
	})
	.catch(function (error){
		console.log(error);
	});

如果出现错误，则会调用catch方法中的回调，并向该函数传递一个错误对象。错误处理的一般形式如下：

axios.get('/book?id=1')
	.catch(function (error){
		if(error.response){
			//请求已发送并接收到服务器端的响应，但响应的状态码不是2XX
			console.log(error.response.data);
			console.log(error.response.status);
			console.log(error.response.headers);
		}else if(error.resquest){
			//请求已发送，但未接收到响应
			console.log(error.resquest);
		}else{
			//设置请求时出现问题而引发错误
			console.log('Error',error.message);
		}
		console.log(error.config);
	});