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中

<Form onSubmit={this.handleSubmit}  action="/lecheng/public/index.php/index/index/loginAction" className="login-form" method="post">

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中：

<?php
namespace app\index\controller;

class Index
{
/**
* @return mixed
* 跳转到index页面
*/
public function index()
{
return view('index');
}

/**
*  用户登陆请求接口
*/
public function loginAction()
{
if($_POST["userName"]=='admin'){
return  '0';
}else{
return  '1';
}
}
}

fetch常见报错解决办法：

报错一、 后端接收不到fetch传过去的数据

注意header和body的写法

报错二、 浏览器的console中显示 Uncaught SyntaxError: Unexpected token < in JSON at position 0

请检查php文件给返回的data数据，是否标准json格式。如果php文件中有var_dump、echo、注释等，都会对返回的json数据有影响。