学习和使用fetch时觉得写法简便，便于逻辑编写es6嘛，但是很难用，网上资料基本上都是以node为后台的官方也是，资料不多，大多都是转发别人重复多，我这个是以java为后台所以自学摸得难受。
前段普通的get请求
body
<body>
<div>
<input name="uploadFile" id="aa" type="file"/>
<button id="btn">获取信息</button>
</div>
</body>javascript
$(function(){
var btn=document.getElementById('btn');
btn.onclick=function(){
fetch('http://localhost:8080/image/FetchServlet', {
method: "get",
mode:"cors",//是否允许跨域请求，以及那些响应的属性是可读的cors默认允许跨域请求，准守cors协议。no-cors：该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源。前提条件是请求的 method 只能是 HEAD、GET 或 POST。same-origin：如果是一个跨域请求，将返回一个 error.navigate：支持导航的模式，仅用于 HTML 导航
redirect:'follow',//定义重定向处理方式。可选值：follow(默认), error, manual。
headers:new Headers({
'Content-Type':'text/plain',
}),credentials:'omit',//(默认)omit不发送 Cookie,same-origin：同域下自动发送 Cookie，include：始终发送 Cookie，即使是跨域
cache:'default'
/*
default：浏览器在其 HTTP 缓存中查找匹配的请求。
a. 如果匹配并且是新鲜的，它将从缓存中返回。
b. 如果存在匹配但已失效，则浏览器将向远程服务器发出有条件的请求。如果服务器指出资源没有改变，它将从缓存中返回。
否则资源将从服务器下载并且缓存将被更新。
c. 如果没有匹配，浏览器将发出正常的请求，并且下载的资源更新缓存。
no-store：浏览器从远程服务器获取资源，而不先查看缓存，并且不会使用下载的资源更新缓存。
reload：浏览器从远程服务器获取资源，而不先查看缓存，但随后将使用下载的资源更新缓存。
no-cache：浏览器在其 HTTP 缓存中查找匹配的请求。
a. 如果匹配，新鲜或陈旧，浏览器将向远程服务器发出有条件的请求。如果服务器指出资源没有改变，它将从缓存中返回。
否则资源将从服务器下载并且缓存将被更新。
b. 如果没有匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
force-cache：浏览器在其 HTTP 缓存中查找匹配的请求。
a. 如果有匹配，新鲜或陈旧，它将从缓存中返回。
b. 如果没有匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
only-if-cached：浏览器在其 HTTP 缓存中查找匹配的请求。只能用在 mode 为 same-origin 的情况下
a. 如果匹配，新鲜或陈旧，将从缓存中返回。
b. 如果没有匹配，浏览器将返回一个错误。
*/
}).then(function(response) {
console.log(response)
return response.json()//后台json传所以json接
}).then(function(data) {
console.log(data)
$.each(data,function(i,item){
console.log(item.username)
});
}).catch(function(e) {
console.log("Oops, error");
});
})后台是原生servlet没有框架
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
PrintWriter out = response.getWriter();
// 输出数据
ArrayList<Users> arraylistUsers = new ArrayList<Users>();
Users user = new Users();
user.setUsername("aaaaaaaaaaaaaaa");
Users user1 = new Users();
user1.setUsername("bbbbb");
Gson gson=new Gson();
arraylistUsers.add(user);
arraylistUsers.add(user1);
System.out.println(gson.toJson(arraylistUsers));
out.write(gson.toJson(arraylistUsers));
}效果图
post请求
javascript
$(function(){
var btn=document.getElementById('btn');
let formData = new FormData();
formData.append('name','login');
formData.append('age',123);
btn.onclick=function(){
fetch('http://localhost:8080/image/FetchServlet', {
method:"POST",
body:formData
});
}
})
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items;
try {
items = upload.parseRequest(request);
Map params = new HashMap();
for(Object object:items){
FileItem fileItem = (FileItem) object;
if (fileItem.isFormField()) {
params.put(fileItem.getFieldName(), fileItem.getString("utf-8"));//如果你页面编码是utf-8的
}
}
//使用params.get获取参数值
String send_time = (String) params.get("name");
String ages = (String) params.get("age");
System.out.println(send_time);
System.out.println(ages);
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}执行结果
关于兼容性的话不高，ie9以下不支持（比如es6写法.catch写法，ie8就说我不认识他），各大浏览器还是支持的
官方给出兼容性方法
if(self.fetch){
//这里写fetch
}else{
ajax或者原生异步
}