node.js中axios使用心得总结


Posted in Javascript onNovember 29, 2017

Axios是一个基于Promise的 HTTP 库,可以用在浏览器和node.js 中,因为尤大大的推荐,axios也变得越来越流行。最近项目中使用axios也遇到了一些问题,就借此机会总结一下,如有错误,还请不吝指正。

功能

浏览器端发起XMLHttpRequests请求

node层发起http请求

支持Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF(跨站请求伪造)

兼容

node.js中axios使用心得总结

使用

npm
npm install axios

bower
bower install axios

cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

发起请求

GET

axios.get('/user?ID=123')
  .then( res => {
    console.info(res)
  }).catch( e => {
    if(e.response){
    //请求已发出,服务器返回状态码不是2xx。
      console.info(e.response.data)
      console.info(e.response.status)
      console.info(e.response.headers)
    }else if(e.request){
      // 请求已发出,但没有收到响应
      // e.request 在浏览器里是一个XMLHttpRequest实例,
      // 在node中是一个http.ClientRequest实例
      console.info(e.request)
    }else{
      //发送请求时异常,捕捉到错误
      console.info('error',e.message)
    }
    console.info(e.config)
  })
// 等同以下写法
axios({
  url: '/user',
   method: 'GET',
  params: {
    ID: 123
  }
}).then( res => {
  console.info(res)
}).catch( e=> {
  console.info(e)
})

POST

axios.post('/user', {
  firstName: 'Mike',
  lastName: 'Allen'
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
})
// 等同以下写法
axios({
  url: '/user',
  method: 'POST',
  data: {
    firstName: 'Mike',
    lastName: 'Allen'
  }
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
})

注意事项

在使用GET方法传递参数时使用的是params,并且官方文档中介绍为:params are the URL parameters to be sent with the request. Must be a plain object or a URLSearchParams object。译为:params作为URL链接中的参数发送请求,且其必须是一个plain object或者是URLSearchParams object。plain object(纯对象)是指用JSON形式定义的普通对象或者new Object()创建的简单对象;而URLSearchParams object指的是一个可以由URLSearchParams接口定义的一些实用方法来处理 URL 的查询字符串的对象,也就是说params传参是以/user?ID=1&name=mike&sex=male形式传递的。

而在使用POST时对应的传参使用的是data,data是作为请求体发送的,同样使用这种形式的还有PUT,PATCH等请求方式。有一点需要注意的是,axios中POST的默认请求体类型为Content-Type:application/json(JSON规范流行),这也是最常见的请求体类型,也就是说使用的是序列化后的json格式字符串来传递参数,如:{ "name" : "mike", "sex" : "male" };同时,后台必须要以支持@RequestBody的形式接收参数,否则会出现前台传参正确,后台接收不到的情况。

如果想要设置类型为Content-Type:application/x-www-form-urlencoded(浏览器原生支持),axios提供了两种方式,如下:

浏览器端

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/user', params);

不过,并不是所有浏览器都支持URLSearchParams,兼容性查询caniuse.com,但是这里有一个Polyfill (polyfill:用于实现浏览器并不支持的原生API的代码,可以模糊理解为补丁,同时要确保polyfill在全局环境中)。

或者,你也可以用qs这个库来格式化数据。默认情况下在安装完axios后就可以使用qs库。

const qs = require('qs');
axios.post('/user', qs.stringify({'name':'mike'}));

node层

在node环境中可以使用querystring。同样,也可以用qs来格式化数据。

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({'name':'mike'}));

补充

常见的请求体类型还有一种方式,即multipart/form-data(浏览器原生支持),也就是提交表单数据常用的一种格式。和x-www-form-urlencoded对比起来,后者则是数据被编码成以 '&' 分隔的键-值对, 同时以 '=' 分隔键和值。非字母或数字的字符会被Percent-encoding(URL encoding),这也就是为什么这种类型不支持二进制数据的原因 (应使用 multipart/form-data 代替)。

Javascript 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
Vue2.0用户权限控制解决方案
Nov 29 #Javascript
vue.js项目中实用的小技巧汇总
Nov 29 #Javascript
关于 angularJS的一些用法
Nov 29 #Javascript
ReactNative之FlatList的具体使用方法
Nov 29 #Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 #Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 #jQuery
jquery animate动画持续运动的实例
Nov 29 #jQuery
You might like
自动分页的不完整解决方案
2007/01/12 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
Js的MessageBox
2006/12/03 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
jQuery实现评论模块
2020/08/19 jQuery
JavaScript实现京东快递单号查询
2020/11/30 Javascript
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
高一地理教学反思
2014/01/18 职场文书
国家助学金获奖感言
2014/01/31 职场文书
股权投资意向书
2014/04/01 职场文书
精神文明单位申报材料
2014/05/02 职场文书
教师师德演讲稿
2014/05/06 职场文书
python中的被动信息搜集
2021/04/29 Python
新手入门Mysql--sql执行过程
2021/06/20 MySQL
SQL中的三种去重方法小结
2021/11/01 SQL Server
MySQL笔记 —SQL运算符
2022/01/18 MySQL