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

时间: 2018-01-05阅读: 4721标签: 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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

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

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

axios-mock-adapter_一个axios调试好用的工具

axios-mock-adapter可以用来拦截http请求,并模拟响应,使用起来也很简单,比如你想模拟下服务器返回个500错误,什么404找不到、403禁止访问、500服务器错误、503服务不可用、504网关超时等等,你都能模拟出来

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

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

vue axios 拦截器

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

vue中axios的使用与封装

分享下我自己的axios封装,axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理。当然首先是npm安装axios 很简单。在src下新建文件夹 service / index.js,接着上代码

vue中Axios的封装和API接口的管理

我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库

axios统一接口管理及优化

根据在项目的使用,发现有以下问题需要优化:withAxios导出的接口方法对象对编辑器来说是不透明的,所以代码提示功能缺失。同一个方法调用多次,如何保证组件总是获取到最后一次的返回信息。

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

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

封装axios

创建一个server目录,在该目录下创建index.js文件,配置axios:使用create方法创建axios实例,封装请求方法:创建一个api.js文件

axios基于常见业务场景的二次封装

axios的二次封装,功能实现:1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环境变量4.全局loading状态5.可关闭的全局错误提醒6.可开启携带全局分页参数

网络模块axios的简单应用

例子中使用到的url仅作为示例,不一定有效,想要复现代码需要使用能够提供数据的有效服务器接口url,axios:ajax i/o system;是用于在Vue.js中发送网络请求的第三方框架;可通过许多方式发送网络请求比如:

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广