详解axios在node.js中的post使用

前言：

最近因为做的东西需要用到网络请求库，之前接触过的只有request，很强大好用。但是这个项目中需要用到Promise，我又不想重新封装，于是选择了另一款库axios。

在node中，axios的get请求加上原生支持的Promise语法使用起来很方便，很丝滑，但是后面碰到了一个需求，就是要向另一个服务器post数据，并且这个数据是以form-data的形式post过去的，这时，问题就出现了。

问题：

当我想在node中使用axios以post的方式发送一张图片给某个server时，最先我是尝试这样做：

方案一

 let data = fs.createReadStream(__dirname + '/test.jpg')
 axios.post(url,{media:data,type:"image"})
 .then(function (response) {
 console.log(response.data);
 })
 .catch(function (error) {
 console.log(error);
 })

事实证明，这样做是完全没有用的，我尝试向另一个服务器poststream，返回的总是错误。然而，如果我使用request，下面这样的代码是完全没有问题的：

方案二

 let data = fs.createReadStream(__dirname + '/test.jpg')
 let form = {
 type:"image",
 media:data
 }
 
 request.post({url:url,formData:form},(err,res,body)=>{
 if(err) console.log(err)
 console.log(body)
 })

探索：

于是，我陷入了思考，WTF！！

我打算简单的写一个服务器，用于打印HTTP请求，然后查看区别（别问我为什么不用抓包工具，任性！），代码呼之欲出：

 import Koa from 'koa'

 const app = new Koa()

 app.use(ctx=>{
 console.log("===============================================")
 console.log(ctx.request)
 console.log("===============================================")
 ctx.body = {foo:"bar"}
 })

 app.listen(3000,()=>{
 console.log("listening on 3000 port")
 })

此时，将url设置为:http://127.0.0.1:3000/,再分别执行方案一和方案二 这时打印出了这样的结果：

 listening on 3000 port
 ===============================================
 { method: 'POST',
 url: '/',
 header: 
 { accept: 'application/json, text/plain, */*',
 'content-type': 'application/json;charset=utf-8',
 'user-agent': 'axios/0.14.0',
 'content-length': '587',
 host: '127.0.0.1:3000',
 connection: 'close' } }
 ===============================================
 ===============================================
 { method: 'POST',
 url: '/',
 header: 
 { host: '127.0.0.1:3000',
 'content-type': 'multipart/form-data; boundary=--------------------------949095406788084443059291',
 'content-length': '186610',
 connection: 'close' } }
 ===============================================

- 上面的是方案一，下面的是方案二

这时可以看出，方案一和二的差别最明显的是content-type,是的，这也是决定了方案一不可行的因素。 既然是content-type导致的，那么方案一PLUS就比较明了了，查阅axios的文档后，我决定手动设置content-type，于是乎：

 let data = fs.createReadStream(__dirname + '/test.jpg')
 let header = {
 'content-type': 'multipart/form-data'
 }
 axios.post(url,{media:data,type:"image"},{headers:header})
 .then(function (response) {
 console.log(response.data);
 })
 .catch(function (error) {
 console.log(error);
 })

- 这时，请求是这样的：

 ===============================
 { method: 'POST',
 url: '/',
 header: 
 { accept: 'application/json, text/plain, */*',
  'content-type': 'multipart/form-data',
  'user-agent': 'axios/0.14.0',
  'content-length': '587',
  host: '127.0.0.1:3000',
  connection: 'close' } }
 ================================

貌似差别不大，但我先试着往服务器post数据时，仍然返回错误。实际上这时候没有boundary，文件其实并没有被绑定上去，所以现在仍然没有解决问题。至于boundary,这里有个链接非常能说明问题。

到这里，我们就要耐下心来好好思考了，区别就在于，request中能够设置正确的请求头，那么它是怎么办到的呢，于是我开始翻看request的源码，发现了这一段：

 if (options.formData) {
 var formData = options.formData
 var requestForm = self.form()
 var appendFormValue = function (key, value) {
 if (value && value.hasOwnProperty('value') && value.hasOwnProperty('options')) {
 requestForm.append(key, value.value, value.options)
 } else {
 requestForm.append(key, value)
 }
 }
 for (var formKey in formData) {
 if (formData.hasOwnProperty(formKey)) {
 var formValue = formData[formKey]
 if (formValue instanceof Array) {
 for (var j = 0; j < formValue.length; j++) {
 appendFormValue(formKey, formValue[j])
 }
 } else {
 appendFormValue(formKey, formValue)
 }
 }
 }
 }

这一段是request在初始化参数中的formData，其中调用了它自身的form()方法，追踪这个函数：

 Request.prototype.form = function (form) {
 var self = this
 if (form) {
 if (!/^application\/x-www-form-urlencoded\b/.test(self.getHeader('content-type'))) {
 self.setHeader('content-type', 'application/x-www-form-urlencoded')
 }
 self.body = (typeof form === 'string')
 ? self._qs.rfc3986(form.toString('utf8'))
 : self._qs.stringify(form).toString('utf8')
 return self
 }
 // create form-data object
 self._form = new FormData()
 self._form.on('error', function(err) {
 err.message = 'form-data: ' + err.message
 self.emit('error', err)
 self.abort()
 })
 return self._form
 }

发现了request调用了另一个库form-data，先通过self.form()创建出一个formData对象，再遍历options里的formData项，递归地将内容通过formData的append方法放进去，也就是说是formData实现了post文件，于是乎，我在axios中插入formData，形成了方案三：

方案三：

 let data = fs.createReadStream(__dirname + '/test.jpg')
 let form = new FormData()
 form.append('type','image')
 form.append('media',data,'test.jpg')

 axios.post(url,form).then((response)=>{
 console.log(response.data)
 })
 .catch(e=>{console.log(e)})

但是，事实告诉我，我还是悲剧了，请求打印出来是这样的：

 ===============================================
 { method: 'POST',
 url: '/',
 header: 
 { accept: 'application/json, text/plain, */*',
 'content-type': 'application/x-www-form-urlencoded',
 'user-agent': 'axios/0.14.0',
 host: '127.0.0.1:3000',
 connection: 'close',
 'transfer-encoding': 'chunked' } }
 ===============================================

再次content-type还是不对，于是我再去翻axios的文档和issue，发现，默认设置的content-type就是application/x-www-form-urlencoded，于是我判断，一定还是要手动设置headers的

于是，基于方案三，我又添加了和改动了这两行形成了方案四：

方案四

 let header = {
 'content-type': 'multipart/form-data'
 }

 axios.post(url,form,{headers:header}).then((response)=>{
 console.log(response.data)
 })

但结果还是不理想，直接设置content-type是不行的，因为要将待发送文件绑定，就一定会有boundary出现，另外在方案三和方案四的请求中，出现了transfer-encoding这个值，关于这个chunked,可以参考MDN和这篇文章

一边google一边看文档的我，发现formData的文档中出现过form.getHeaders()的写法，于是方案五出现了：

方案五

 let data = fs.createReadStream(__dirname + '/test.jpg')
 let form = new FormData()
 form.append('type','image')
 form.append('media',data,'test.jpg')

 axios.post(url,form,{headers:form.getHeaders()}).then((response)=>{
 console.log(response.data)
 })
 .catch(e=>{console.log(e)})

但是结果表明，这样还是不行，现在的请求是这样：

 ===============================================
 { method: 'POST',
 url: '/',
 header: 
  { accept: 'application/json, text/plain, */*',
 'content-type': 'multipart/form-data; boundary=--------------------------171407872885673042671614',
 'user-agent': 'axios/0.14.0',
 host: '127.0.0.1:3000',
 connection: 'close',
 'transfer-encoding': 'chunked' } }
 ===============================================

但是我目前项目需求是，不使用chunked而采用content-length的方法来传输，这意味着，我要想办法搞到form的长度

在成功案例中，使用requests，于是我翻看了部分源码： 在request/request.js里出现了

 function setContentLength () {
 if (isTypedArray(self.body)) {
  self.body = new Buffer(self.body)
 }
 
 if (!self.hasHeader('content-length')) {
  var length
  if (typeof self.body === 'string') {
 length = Buffer.byteLength(self.body)
  }
  else if (Array.isArray(self.body)) {
 length = self.body.reduce(function (a, b) {return a + b.length}, 0)
  }
  else {
 length = self.body.length
  }
 
  if (length) {
 self.setHeader('content-length', length)
  } else {
 self.emit('error', new Error('Argument error, options.body.'))
  }
 }
 }

它采用Buffer来计算长度，然后添加到headers中去

然后看看在axios里是如何做的： axios/lib/adapters/http.js里出现了

 if (data && !utils.isStream(data)) {
  if (utils.isArrayBuffer(data)) {
 data = new Buffer(new Uint8Array(data));
  } else if (utils.isString(data)) {
 data = new Buffer(data, 'utf-8');
  } else {
 return reject(createError(
  'Data after transformation must be a string, an ArrayBuffer, or a Stream',
  config
 ));
  }
 
  // Add Content-Length header if data exists
  headers['Content-Length'] = data.length;
 }

下文并没有出现else，所以，当data是stream的时候，并没有自动设置content-length

所以，我需要在formData.getHeaders()后，再添加一个content-length的key

想要计算长度，自然想到去看看源码，于是在form-data/lib/form_data.js中出现了惊喜:

 FormData.prototype.getLength = function(cb) {
 var knownLength = this._overheadLength + this._valueLength;
 
 if (this._streams.length) {
 knownLength += this._lastBoundary().length;
 }
 
 if (!this._valuesToMeasure.length) {
 process.nextTick(cb.bind(this, null, knownLength));
 return;
 }
 
 asynckit.parallel(this._valuesToMeasure, this._lengthRetriever, function(err, values) {
 if (err) {
  cb(err);
  return;
 }
 
 values.forEach(function(length) {
  knownLength += length;
 });
 
 cb(null, knownLength);
 });
 };

formData已经封装好了得到长度的方法，只不过它是异步的，不过没关系，在实际项目中，可以将它手动Promise化。最终方案的代码也就自然出现了：

方案六：

 let data = fs.createReadStream(__dirname + '/test.jpg')
 let form = new FormData()
 form.append('type','image')
 form.append('media',data,'test.jpg')
 form.getLength((err,length)=>{
 if(err) console.log(err)
 let headers = Object.assign({'Content-Length':length},form.getHeaders())
 axios.post(url,form,{headers:headers}).then((response)=>{
 console.log(response.data)
 })
 .catch(e=>{console.log(e)})
 })

这时的请求打印后是这样的：

 ===============================================
 { method: 'POST',
 url: '/',
 header: 
 { accept: 'application/json, text/plain, */*',
 'content-type': 'multipart/form-data; boundary=--------------------------424584867554529984619649',
 'content-length': '186610',
 'user-agent': 'axios/0.14.0',
 host: '127.0.0.1:3000',
 connection: 'close' } }
 ===============================================

事实证明它是可以工作的。

更进一步，我们把异步代码Promise一下,得到最终方案:

最终方案

 let data = fs.createReadStream(__dirname + '/test.jpg')
 let form = new FormData()
 form.append('type','image')
 form.append('media',data,'test.jpg')

 let getHeaders = (form=>{
 return new Promise((resolve,reject)=>{
 form.getLength((err,length)=>{
 if(err) reject(err)
 let headers = Object.assign({'Content-Length':length},form.getHeaders())
 resolve(headers)
 })
 })
 })

 getHeaders(form)
 .then(headers=>{
 return axios.post(url,form,{headers:headers})
 })
 .then((response)=>{
 console.log(response.data)
 })
 .catch(e=>{console.log(e)})

总结

得到一个结论，多多看issue，多多看源码，多多了解基础知识（HTTP协议），对于问题的解决十分重要。最后这一套的实验代码放在github上了，需要研究研究的同学们可以看看:axios-request或者下载到本地学习

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# nodejs  # axios  # axios.js  # post  # node.js  # 如何使用axios库在Node.js中进行代理请求(实践案例)  # Node.js中Express框架使用axios同步请求(async+await)实现方法  # Node.js+Express+Vue+MySQL+axios的项目搭建全过程  # Node.js 使用axios读写influxDB的方法示例  # node.js通过axios实现网络请求的方法  # node.js中axios使用心得总结  # 如何在 Node.js 中使用 axios 配置代理并实现图  # 出现了  # 是这样  # 的是  # 它是  # 文档  # 好了  # 我又  # 形成了  # 这样做  # 这篇文章  # 递归  # 绑定  # 发现了  # 我是  # 我想  # 这一  # 我要  # 是在  # 我在  # 放在 

相关文章： 制作网站的基本流程,设计网站的软件是什么？  建站之星如何快速解决建站难题？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  如何快速使用云服务器搭建个人网站？  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  C++ static_cast和dynamic_cast区别_C++静态转换与动态类型安全转换  宝塔新建站点报错如何解决？  如何彻底删除建站之星生成的Banner？  如何构建满足综合性能需求的优质建站方案？  广州顶尖建站服务：企业官网建设与SEO优化一体化方案  浅析上传头像示例及其注意事项  建站主机选购指南：核心配置与性价比推荐解析  学校为何禁止电信移动建设网站？  全景视频制作网站有哪些,全景图怎么做成网页？  北京企业网站设计制作公司,北京铁路集团官方网站？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  如何快速搭建响应式可视化网站？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  如何高效配置香港服务器实现快速建站？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  如何选择长沙网站建站模板？H5响应式与品牌定制哪个更优？  长沙企业网站制作哪家好,长沙水业集团官方网站？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  如何通过FTP服务器快速搭建网站？  建站之星安装后如何配置SEO及设计样式？  如何通过可视化优化提升建站效果？  建站三合一如何选？哪家性价比更高？  如何基于云服务器快速搭建个人网站？  黑客入侵网站服务器的常见手法有哪些？  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  如何通过西部数码建站助手快速创建专业网站？  三星网站视频制作教程下载,三星w23网页如何全屏？  建站之星代理如何获取技术支持？  如何用5美元大硬盘VPS安全高效搭建个人网站？  如何选择域名并搭建高效网站？  建站之星后台管理：高效配置与模板优化提升用户体验  宁波免费建站如何选择可靠模板与平台？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  高防服务器租用如何选择配置与防御等级？  IOS倒计时设置UIButton标题title的抖动问题  建站VPS推荐：2025年高性能服务器配置指南  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型  建站之星备案流程有哪些注意事项？  导航网站建站方案与优化指南：一站式高效搭建技巧解析  装修招标网站设计制作流程,装修招标流程？  网站制作多少钱一个,建一个论坛网站大约需要多少钱？  如何用y主机助手快速搭建网站？