【转】axios的基本使用

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 }));