【转】axios的基本使用

vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的 axios

基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用

版本 v0.15.3

功能特性

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击

请求方式

axios(config)
 
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]])

get请求

axios
	.get('/user',{ params:{id: 12} })
	.then(res=>{ console.log(res) })
	.catch(err=>{ console.log(err) })

post请求

axios
	.post('/user',{id: 12})
	.then(res=>{ console.log(res) })
	.catch(err=>{ console.log(err) })

发送并发请求

axios
	.all([axios.get('/profile'), axios.post('/user')])
	.then(axios.spread((res1, res2)=>{
		console.log(res1)
		console.log(res2)
	}))

axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

直接通过配置发送请求，类似于 $.ajax(config)

axios(config) / axios(url,[config])

axios({
	url:'/user',
	method: 'post',
	data:{ id: 1 },
})
 
axios('/user/12')

axios实例

实例配置

使用自定义的配置创建一个axios实例

var axiosIns = axios.create({
	baseURL: '',
	timeout: 60000,
	headers: {'X-Custom-Header': 'foo'}
})

axiosIns.get/post/delete/put/patch/head 都可以共用实例配置

请求配置

{
	// 请求地址
	url: '/user',
	// 请求类型
	method: 'get',
	// 请根路径
	baseURL: 'http://www.mt.com/api',
	// 请求前的数据处理
	transformRequest:[function(data){}],
	// 请求后的数据处理
	transformResponse: [function(data){}],
	// 自定义的请求头
	headers:{'x-Requested-With':'XMLHttpRequest'},
	// URL查询对象
	params:{ id: 12 },
	// 查询对象序列化函数
	paramsSerializer: function(params){ }
	// request body
	data: { key: 'aa'},
	// 超时设置s
	timeout: 1000,
	// 跨域是否带Token
	withCredentials: false,
	// 自定义请求处理
	adapter: function(resolve, reject, config){},
	// 身份验证信息
	auth: { uname: '', pwd: '12'},
	// 响应的数据格式 json / blob /document /arraybuffer / text / stream
	responseType: 'json',
 
	// xsrf 设置
	xsrfCookieName: 'XSRF-TOKEN',
	xsrfHeaderName: 'X-XSRF-TOKEN',
 
	// 下传和下载进度回调
	onUploadProgress: function(progressEvent){
		Math.round( (progressEvent.loaded * 100) / progressEvent.total )
	},
	onDownloadProgress: function(progressEvent){},
 
	// 最多转发数，用于node.js
	maxRedirects: 5,
 
	// 最大响应数据大小
	maxContentLength: 2000,
	// 自定义错误状态码范围
	validateStatus: function(status){
		return status >= 200 && status < 300;
	},
	// 用于node.js 
	httpAgent: new http.Agent({ keepAlive: treu }),
	httpsAgent: new https.Agent({ keepAlive: true }),
 
	// 用于设置跨域请求代理
	proxy: {
		host: '127.0.0.1',
		port: 8080,
		auth: {
			username: 'aa',
			password: '2123'
		}
	},
	// 用于取消请求
	cancelToken: new CancelToken(function(cancel){})
}

响应的数据结构

{
	data: {}, //服务器返回的数据
	status: 200,
	statusText: 'OK',
	headers: {},
	config: {}
}

全局配置

应用于所有请求

axios.defaults.baseURL = ‘http://www.mt.com/api‘
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

拦截请求与响应

在 then 或 catch 之前拦截处理

// 请求拦截
axios.interceptors.request.use(function (config) {
    // 处理请求之前的配置
    return config;
  }, function (error) {
    // 请求失败的处理
    return Promise.reject(error);
  });
 
// 响应拦截
axios.interceptors.response.use(function (response) {
    // 处理响应数据
    return response;
  }, function (error) {
    // 处理响应失败
    return Promise.reject(error);
  });

错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 服务器返回正常的异常对象
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // 服务器发生未处理的异常
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

取消请求

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
 
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});
 
// 取消请求
source.cancel('Operation canceled by the user.');

var CancelToken = axios.CancelToken;
var cancel;
 
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
 
// 取消请求
cancel();

qs模块

用于处理URL查询参数

var qs = require('qs');

axios.post('/foo', qs.stringify({ 'bar': 123 }));