内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

axios的基本使用

2017-03-22 11:18 出处:清屏网 人气: 评论(0

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’;

拦截请求与响应

thencatch 之前拦截处理

// 请求拦截
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 }));

更详细更新的文档请参考 axios github


分享给小伙伴们:
本文标签: axios

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号