Axios 网络请求使用

前言：

axios，也是JQuery.Ajax的替代品，用于发送网络请求，底层用Promise封装，使用起来更方便。

基本使用：

// .src/main.js
import axios from 'axios';

axios({
    
    
	url:'http://httpbin.org/get'
//  method: 'get'，默认情况下，对这个url发送get，除非说明
}).then(res =>{
    
    
	console.log(res);
	//因为axios()是经过Promise封装，它本身返回一个Promise
	//所以这里用then()
});

这里，res是一个对象

其中，除了data是服务器发送过来的数据，其他属性都是axios框架附加上的，所以，前端在展示数据的时候要对这个res对象进行解析。

高级使用：
现在有个需求 ，发送2个网络请求，都完成后才进行数据的操作

思路：可以用Promise.all，也可以用axios.all

axios.all([
	axios({
    
    
		url:'http://jd.com',
		//params是拼接在url后面的query参数
		params: {
    
    type:'sell', page:3}
	}),
	axios({
    
    
		url:'http://taobao.com'
	}),
]).then(axios.spread((res1,res2)=>{
    
    
	console.log(res1);
	console.log(res2)
}));

axios配置信息使用

一般的开发中，不会直接在axios({})里面写url, params等之类的信息，反而把这些写在配置里面
即：

axios.defaults.baseURL = 'http://httpbin.org';
axios.defaults.timeout = 5000;//5 seconds
axios({
    
    
  url: '/get', 
}).then( res =>{
    
    
  console.log(res);
});

配置里面，还可以写很多配置信息，这里的baseURL会和后面的url进行一个拼接，配置信息是保存在axios里面的。
常见的配置信息选项：