在前端的快速发展中，为了契合更好的设计模式，产生了fetch框架，fetch返回的信息比xmlhttprequest更丰富。但它目前还不是一个标准，它支持大部分常用的http 请求和响应的标准。
一. 一个完整的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即请求的处理路径；
第二个是初始化信息，包括以下几种：
（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);
}
}
后台成功输出：
浏览器控制台成功打印：
三. 和ajax 的对比
（1）上面的fetch代码很像jquery中的ajax，但是两者是不同的，fetch是原生的js，而jquery中的ajax是库封装的；
（2）ajax只能实现同源请求，fetch可实现跨域请求；
（3）ajax几乎所有的主流浏览器都支持，但fetch由于目前并没有被列入标准，只有像firefox最新版，chrome最新版，以及ie10+等以上才支持，如下图片所示；
注意：在body中向后台传递参数时，只有写成“key=value&key=value”的形式才会成功，其它方法后台接收到均为null，封装为formdata格式也不成功。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
网友评论