.net post提交后接收返回数据_Fetch API与POST请求参数格式那些事

简述

相信不少前端开发童鞋与后端联调接口时，都会碰到前端明明已经传了参数，后端童鞋却说没有收到，尤其是post请求，遇到的非常多。本文以node.js作为服务端语言，借用express框架，简要分析客户端发送post请求的四种方式以及服务端如何接收。本文客户端请求没有借助第三方ajax库，采用的是Fetch API，虽然浏览器兼容性有点问题，但是用法简洁灵活，以后可能会是一个趋势。在说post请求之前，先简要概述下Fetch API。

Fetch API

Fetch API提供了一个获取资源的接口（包括跨域请求），提供了更强大和灵活的功能集。未来可能是XMLHttpRequest的一种替代方案。去年GitHub代码去jQuery重构时，就使用Fetch API替代jQuery的ajax，毕竟目前JavaScript很多原生语法都进行了大量精简，比如DOM操作API、http请求fetch、es6+等。今天的axios可能就是明日的jQuery！

简单的实例

Fetch API主要暴露了三个接口一个方法。

• 三个接口
• Request(资源请求)
• Response(请求的响应)
• Headers(Request/Response头部信息)
• 一个方法
• fetch()(获取资源调用的方法)

// 实例化一个Request实例
// 第一个参数一般指资源路径
// 第二个参数可以理解为请求的配置项，包含头部信息和http请求一些关键配置（请求类型、参数...）
let requestInstance = new Request('/hello', {
    
    method: 'post',
    headers: {
    
        'Content-Type': 'application/json;charset=utf-8'
    },
    body: '{"hello": "world"}'
})
// fetch方法参数同Request实例
// 第一个参数为url或者Request实例
// 第二个参数为请求配置项
fetch(requestInstance).then(response => {
    
    // 返回的是一个Response的实例
    // 调用Response实例的序列化方法，序列化成json,返回值是一个promise
    // 序列化方法有 json,text,formData,blob,arrayBuffer,redirct
    let result = response.json()
    result.then(res => {
    
        consolee.log(res)
    })
})

有意思的特性

Fetch API添加了一个实验性的功能，支持客户端手动取消http请求了，这个比较有意思，因为之前的a