本文详细介绍ES6中Fetch API的实现方法，涵盖POST请求的参数配置、Promise响应处理及数据格式转换。通过对比Ajax，分析两者在跨域支持、浏览器兼容性及原生实现上的差异，并提供完整的代码示例与后台处理逻辑，帮助开发者掌握现代前端异步请求技术。
Fetch API概述
随着前端技术的快速演进，为了适配更优的设计模式，Fetch API应运而生。相比传统的XMLHttpRequest，Fetch返回的数据信息更为丰富。尽管目前它尚未被正式纳入Web标准，但它已支持大部分常用的HTTP请求与响应规范。
POST请求完整流程
一、完整的POST请求与响应流程
var url = "/fetch";
fetch(url,{
method:"post",
headers:{
"Content-type":"application/x-www-form-urlencoded"
},
body:"name=luwenjing&age=22"
})
.then(function (response){
if (response.status == 200){
return response;
}
})
.then(function (data) {
return data.text();
})
.then(function(text){
console.log("请求成功，响应数据为:",text);
})
.catch(function(err){
console.log("Fetch错误:"+err);
});（1）fetch函数接收两个参数：第一个参数为请求的URL地址，即处理路径；
第二个参数为初始化配置对象，包含以下属性：
- method：指定请求方法，常用值为get和post；
- headers：设置请求头信息，最常见的是表单格式数据，即Content-type设置为application/x-www-form-urlencoded；
- mode：控制跨域策略，可选same-origin（同源请求）、no-cors（默认值）和cros（允许跨域请求）；
- cache：配置缓存相关设置；
- body：定义发送给后端的数据，支持ArrayBuffer、String、FormData等类型；
（2）从上述代码可知，fetch()方法执行后返回一个Promise对象；
（3）响应信息作为then方法成功回调的参数传入，其中包含丰富的HTTP响应数据，具体结构如下：
（4）可通过判断响应的状态码，来返回请求成功对应的信息；
（5）根据状态进行格式转换，若为文本信息，直接调用text()方法即可；若为JSON格式，则调用json()方法转换为JSON对象，这通常对应于请求数据时设置的格式；
后台处理代码示例
二、后台处理代码示例
import java.io.IOException;
import java.io.Writer;
/**
* Created by LuWenjing on 2017/4/5.
*/
public class fetchServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name + ": " + age);
Writer out = response.getWriter();
out.write("hello world!");
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
doPost(request, response);
}
}后台成功输出结果见
浏览器控制台成功打印信息见
Fetch与Ajax对比
三、Fetch与Ajax的对比分析
（1）上述Fetch代码在写法上与jQuery中的ajax相似，但两者本质不同：Fetch是原生JavaScript实现，而jQuery中的ajax是对底层接口的库封装；
（2）Ajax仅能实现同源请求，而Fetch支持跨域请求；
（3）Ajax在几乎所有主流浏览器中均得到支持，而Fetch由于尚未列入标准，仅在Firefox最新版、Chrome最新版以及IE10及以上版本中得到支持，具体兼容性如下图所示：
注意：在body中向后端传递参数时，必须采用key=value&key=value的形式才能成功，其他格式后端接收到的值均为null，即使封装为FormData格式也无法成功。
本文内容至此结束，希望对各位的学习有所帮助，也欢迎大家继续支持本站。