- 为什么会想要使用呢？
因为在学http协议，之前都是用框架内的插件发送的数据，脑回路突然想到不用框架试试，刚好有fetch不用引进其他的库所以就试试。 - 如何使用？
本人使用node.js来搭建一个服务器，前端写一个index.html页面，模拟注册报名的形式。
index页面 =》 填写数据 =》 提交 =》 发送请求 =》 接收请求 =》 写入数据流
最后使用node.js的文件系统把报名信息写入一个database.txt文件进行存储。
现阶段fetch还处于起步阶段，还不支持IE,不过错误提醒功能还是挺好的
image.png
开始使用fetch
最简单的请求, 方法为post
var url='http://localhost:8888';
var options = {
hostname: 'localhost',
port: 8888,
path: '/',
method: 'POST',
mode: 'no-cors',
body: ‘msg=hello weimian’
};
var myRequest = new Request(url, options);
fetch(myRequest);
该fetch返回一个promise（一个Response对象）
fetch(url, options)
fetch接受第二个可选参数，第一个参数为请求的地址，第二个参数为请求的配置，包含请求的头部信息，比如方法，在默认情况下为Get方法，所以这里不使用默认情况所以显式设置为method:'POST'
检查请求是否成功
一般情况下，我们都需要通过判断请求是否成功来进行下一步的处理。
fetch(url).then(function(res) {
if(res.ok) {
res.text().then(function(data) {
console.log(data);
});
} else {
console.log('err');
}
在这个例子中，fetch一个url，在返回的promise中，先判断res是否成功，即res.ok是否为true，接着进行获取text文件，输出数据。
Body
fetch一个资源后返回的response不是具体的数据，你会用到的最常见的response属性就只有几个：
- response.status: 一个整数，response的状态码，默认值为200，即发送成功
- response.statusText：一个字符串，与http状态码消息相对应，默认值为'OK'
- response.ok : 这就是上个例子所说的检查response的状态码是否在(200, 299)这个范围内，返回一个boolean值。
在response中你不可以直接得到后台返回的数据，需要进行再解析。所以Body类就定义了一下方法来获取body内容，这些方法返回一个被解析后的promise对象和数据
- arrayBuffer()
使用一个buffer数组来读取response中的数据，arraybuffer表示二进制数据的原始缓冲区，就是一块内存，但不能直接访问里面的字节 - blob()
使用一个blob对象来读取response中的数据。blob是一个二进制大对象，常常用来存储二进制文件的字段类型，常作为一张图片或一个声音文件 - json()
使用一个json对象来读取response中的数据。json在前后台数据交互中是最常见的，是键/值对的形式 - text()
使用一个text对象来读取response中的数据。当后台发送数据为字符串时就使用text()来解析 - formData()
使用一个formData对象来读取response中的数据。formData对象可以灵活方便的发送表单数据，因为可以独立于表单使用。
接下来就以text()为例进行解释
最简单的例子
fetch(url).then(function(res) {
return res.text();
}).then(function(data) {
console.log(data);
})
返回text()方法，进行then再解析，才可以得到数据。这个过程可以写成下列的形式
url =》 promise =》res.text() =》text.data
当然，前提是你要知道后台发送的数据是什么格式的，如果后台发送的数据你当前的方法无法解析，是会报错的。比如你用json()方法来解析，而后台response对象里的数据使用text形式进行发送，就会报错。
Unexpected token r in JSON at position 0
image.png
注意
一些配置在默认情况下可能会报错，比如当你使用get请求时，在你的fetch(url, options)的options对象要设置{mode: 'no-cors'},否则就会报错，可看如下图。
image.png
这其实关乎到跨域资源共享的问题，之后再解释说明自己的理解吧。
附上自己写的最辣鸡起步的报名表单吧哈哈哈，之后学到新的东西再慢慢添加
register
只是在学习怎么用的层面，所以了解较浅，不喜勿喷。
网友评论