聊聊fetch
fetch的使用
fetch是一个发起异步请求的新api, 在浏览器(有些不支持)中可以直接使用。
Promise fetch(url, init)
fetch接收两个参数，第一个参数是请求路径，第二个参数是可选的。
fetch函数返回的是一个promise对象。
一个简单使用的例子:
let url = "http://localhost:8080/user/list";
fetch(url)
.then(response => {
// 检查是否正常返回
if(response.status >= 200 && response.status < 300) {
// 返回的是一个promise对象, 值就是后端返回的数据, 调用then()可以接收
return response.json();
}
const err = new Error(response.statusText);
err.response = response;
throw err;
})
.then(data => {
// 后端返回的JSON数据
console.log(data)
})
.catch(err => console.log(err));
因为fetch返回的是一个promise对象, 因此可以链式调用then、catch等函数。
第一次调用then()拿到的只是一个Response对象，这个对象里面有一系列属性，以及方法。
具体可以参考: Response API
这里主要说说status、statusText、ok、body这几个属性
status: 就是服务器返回的状态码(200、400、500)
statusText: 与status对应的文本显示
ok: 一个bool类型的值, 如果成功(状态码是200-299之间)返回就是true， 否则就是false
body: 响应的数据, 无法直接读取，需要使用response.json()、response.text()等方法解析。
通常后端返会的都是JSON数据, 一般使用response.json()即可。response.json()返回的还是一个Promise
对象，接着再调用then()就能获取到后端返回的数据了。
注: 使用fetch发起异步请求时，只有当网络等原因fetch返回的promise才会变成reject状态，而一般的
错误诸如404、500等还是会变成resolve状态, 因此需要再第一个then函数里面检查是否是成功的返回。
可以 检查状态码或者ok属性是否为true。
fetch的第二个参数init
这个参数是可选的, 如果不传这个参数，那么fetch默认使用get方式发起异步请求。
init是一个对象，格式可以参考: fetch API 下面主要列举几个常用的属性。
method: 请求方式(get、post、put等)
headers: 请求头信息
body: 请求参数，对get方式的请求无效，因为get方式请求的参数在url上 。body的格式与headers设置的
Content-Type参数对应。如Content-Type=application/json，那么body是一个JSON格式。
如Content-Type=application/x-www-form-urlencoded(表单默认的形式就是这个)，那么body就是一个键值
对形式，诸如: username=wangtao&password=123456这样。
Content-Type可以不设置，会根据body格式自动设置Content-Type的值
mode: 请求的模式，与跨域有关系。有cors、no-cors、same-origin 3个值
cors即使用跨域资源共享这种方式实现跨域，需要服务端支持。这种方式不支持Content-Type=application/json
no-cors也是可以跨域的，但是拿不到返回的值。
same-origin不支持跨域。
与generator函数结合
在redux-saga中使用往往都是通过使用generator函数结合实现异步调用。
function request(url) {
return fetch(url)
.then(response => {
if(response.ok) {
return response.json();
}
const err = new Error(response.statusText);
err.response = response;
throw err;
})
.then(result => ({result}))
.catch(err => ({err}));
}
// 非常像resux-saga处理异步请求的写法
function* asyncFetch() {
const {result, err} = yield request("http://127.0.0.1/user/list")
if(result) {
// 执行逻辑, 展示数据
console.log(result)
} else if(err) {
//处理错误
}
}
//调用asyncFetch（redux-saga自己调用, 不用手写）
const g = asyncFetch();
let next = g.next();
if(!next.done) {
next.value.then(data => {
g.next(data)
})
}
上述代码主要用来理解redux-saga处理异步请求的写法，只是一个雏形。
总结
使用fetch需要注意的几个点
服务端返回错误的状态码，fetch返回的promise也是resolve的，因此需要加判断。
如果请求方式是get，fetch的第二参数的body属性无效。
-
如果跨域需要指定第二个参数的mode=cors，需要后端支持(Access-Control-Allow-Origin = "*")
此种方式不支持Content-Type=application/json。
