ReactJs中的网络请求fetch 使用及封装
fetch在reactjs中等同于 XMLHttpRequest，它提供了许多与XMLHttpRequest相同的功能，但被设计成更具可扩展性和高效性。
Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能；除此之外，Fetch 还利用到了请求的异步特性——它是基于 Promise 的。
请注意，fetch 规范与 jQuery.ajax() 主要有两种方式的不同，牢记：
-
当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ）， 仅当网络故障时或请求被阻止时，才会标记为 reject。
-
默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）.
fetch的使用格式：
let formData = new FormData();
formData.append("key", "123456");
formData.append("secret_key", "123456");
formData.append("telephone", $('#phone').val());
fetch('url',{
method: 'POST',
body:formData,
dataType: "text",
}).then(
function(response){
if(response.status!==200){
console.log("存在一个问题，状态码为："+response.status);
return;
}
//检查响应文本
response.json().then(function(data){
if(data.code===1){
this.setState({
value : data.data.code
})
console.log(data.data.code)
}
});
}
).catch(function(err){
console.log("Fetch错误:"+err);
});
fetch的使用（以登录为例，后台语言以thinkphp5为例）：
react中
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
console.log('姓名: ', values.userName)
console.log('密码: ', values.password)
let url = '/lecheng/public/index.php/index/index/loginAction';
fetch(url, {
method: 'POST',
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'userName='+values.userName+'&password='+values.password,
}).then(response => response.json()).then(function(res) {
console.log('返回值[1代表登陆成功，0代表登陆失败]:')
console.log(res)
if(res===1){
window.locaion.href="admin.html"
}else{
alert('登陆失败')
}
console.log(res.status);
});
}
});
}
thinkphp5中：
fetch常见报错解决办法：
-
报错一、 后端接收不到fetch传过去的数据
注意header和body的写法
-
报错二、 浏览器的console中显示 Uncaught SyntaxError: Unexpected token < in JSON at position 0
请检查php文件给返回的data数据，是否标准json格式。如果php文件中有var_dump、echo、注释等，都会对返回的json数据有影响。
fetch默认不携带cookie
fetch发送请求默认是不发送cookie的，不管是同域还是跨域；那么问题就来了，对于那些需要权限验证的请求就可能无法正常获取数据，这时可以配置其credentials项，其有3个值：
omit: 默认值，忽略cookie的发送
same-origin: 表示cookie只能同域发送，不能跨域发送
include: cookie既可以同域发送，也可以跨域发送
credentials所表达的含义，其实与XHR2中的withCredentials属性类似，表示请求是否携带cookie；具体可以参考阮一峰老师的跨域资源共享 CORS 详解中withCredentials一节的介绍；
这样，若要fetch请求携带cookie信息，只需设置一下credentials选项即可，例如fetch(url, {credentials: ‘include’});
另外补充一点：
fetch默认对服务端通过Set-Cookie头设置的cookie也会忽略，若想选择接受来自服务端的cookie信息，也必须要配置credentials选项；
作者：_____西班木有蛀牙
链接：https://www.jianshu.com/p/79c76e45a73d
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。