关闭

axios处理Http请求的基本使用方法总汇

时间: 2018-01-05阅读: 5306标签: axios

功能特性

  • 浏览器中发送 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.fly63.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 }));


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/324

vue中axios请求的封装

发送请求模块目录,@/api/url中存放的是每个模块的URL,使用webpack提供的require.context将src/api/url下后缀为js的所有文件引入,并整理出一个对象。整合common.js & product.js,最终得到的对象如下:

vue axios不缓存get请求(防止返回304不更新数据)

最近做项目遇到一款浏览器,由于缓存了get请求,导致不管如何刷新,数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数,value为时间戳

Vue中axios的封装

axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource

axios表单格式请求后端报错Bad Request

开始没有使用Qs库,能获取到列表数据,但是添加项目等需要传请求参数的情况下,使用表单的传参方式就不能成功请求,就报错。报错如下:

axios 拦截器显示和关闭Loading

使用Loading分为2种情况,第一种是使用一些组件库自带的loading,另一种是使用我们自己写的loading,现分开介绍使用方法。使用element ui 带的Loading

axios常见传参方式_axios中get/post/put/patch请求

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios中get/post/put/patch请求。传参格式为 formData ,传参格式为 query 形式 ,传参格式为 raw等

如何实现 axios 的自定义适配器 adapter

我们想基于 axios 扩展一些自己的数据请求方式(例如 mock 数据,某些 APP 内专属的数据请求方式等),并能够使用上 axios 提供的便捷功能,该怎么自定义一个适配器 adapter

封装 axios 实现自动重试

因为 Axios 是支持 Promise,所以我们的方法也支持。axios 如果成功了我们也 resolve。axios 如果失败了我们先判断次数,然后根据具体的错误,进行重试。

axios前端加密通讯的处理

先谈谈项目前景,因为安全的要求,所以我们要把前端所有的请求都得加密与服务端应用进行通讯,当然服务端的响应也是加密的,前端也需要对应得解密。

vue axios 拦截器

项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!