最近在用node写后台，前台用axios请求数据。学到一些东西和踩了一些坑，整理一下--- 主要针对POST请求

问题汇总

最近遇到的问题大概有以下几个（以后可能会补充）：

1. post请求如果单纯只有一个url和数据（普通对象数据），那么大概率会请求失败；
2. post请求成功后，node后台无法正常获得入参；
3. axios十分有用的常用配置，包括封装、拦截器、入参格式化、返回数据格式化；

1、post请求如果单纯只有一个url和数据（普通对象数据），那么大概率会请求失败；

失败原因：在网上没找到很准确的原因，问了一个后端，他说用java写接口时，如果加了@ResponseBody修饰符，post不添加头部的话是接受不到参数的。我猜大概就是参数格式的问题

解决方法：把参数用

JSON.stringify(data)

或者添加一个 headers

headers:{ 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }

我一开始是这样子写的，但是后来在network里面看到自己的参数形式是这样子的：

而别人项目的参数形式是这样的：

当时没接触过qs这个库，饶了很久，解决的办法就是引入qs这个库

npm install qs

或者使用cdn

<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>

然后入参的时候序列化一下

qs.stringify(data)

PS：不管用json格式化还是qs格式化参数，POST请求的时候建议把上面的头部加上吧。

2、post请求成功后，node后台无法正常获得入参；

直接上解决方法：

解决方法1：

req.on('data',(chunk) => {
    data += chunk
  })
  req.on('end',() => {
    res.send(data)
  })

这种方法是比较原始的方法，坏处是输出的data是这样的

要自己处理后续的操作

解决方法2：

先引入bodyParser npm install bodyParser

const express   = require('express')
const bodyParser= require('body-parser')
const  app = express()
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json());
// 后台我是用express写的，app是express的对象

这种方法直接使用req.body就可以获取到参数了。但是在express4.16已经集成了bodyParser的功能了，所以如果使用的是express4.16可以用下面这个方法：

const app = express();
app.use(express.urlencoded({ extended: false }))

3、axios十分有用的常用配置，拦截器、入参格式化、返回数据格式化；

直接上代码：

 		// 添加默认请求头
        axios.defaults.headers = {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        }
        
        // 添加请求拦截器
        axios.interceptors.request.use(function (request) {
            // 在发送请求之前做些什么
            console.log('我拦截了请求')
            request = request || {}

            /* 增加发送请求前的时间，用于进行接口响应时间统计 */
            request.reqTime = new Date().getTime()
            return request;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log('我拦截了响应')
            config = response.config
            if (config.reqTime) {
                const reqDuration = new Date().getTime() - config.reqTime
                
                config.reqDuration = reqDuration

                console.log(config.url + '    接口响应用时：' + reqDuration + 'ms')
            
        }          
            return response;
        }, function (error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么
            return Promise.reject(error);
        });
        
        /* 请求前的data参数进行处理 */
        axios.defaults.transformRequest = [ (data) => {
            return qs.stringify(data)  // 要先引入qs库 
        }]
        
		/* 请求后的data参数进行处理 */
         axios.defaults.transformResponse = [ (data) => {
         	// 这个我没有用到，因为暂时不需要做什么操作
        }]

4、总结

最近在做毕设，遇到的问题，觉得还挺有用的，所以记录一下。