React_Native项目实战之fetch请求

摘要： fetch简介 在 AJAX 时代，进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架。

fetch简介

在 AJAX 时代，进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架。 fetch相比XMLHttpRequest，提供更加强大、高效的网络请求方式，所以在 Hybrid App 开发模式中，大量的用到了fetch框架作为网络请求。

fetch在浏览器中使用

在 Chrome 浏览器中已经全局支持了 fetch 函数，打开调试工具，在 Console 中可以进行体验下fetch。先不考虑跨域请求的使用方法，我们先请求同域的资源。例如：

fetch("http://blog.csdn.net/xiangzhihong8").then(function(response){console.log(response)})

fetch语法

使用 fetch 的构造函数请求数据后，返回一个 Promise 对象，然后根据具体的实际情况处理。

fetch("http://baidu.com")
.then(function(response){
// ...
})

说明，在请求后的 Response 中，常常有如下返回情况：

Response.status 也就是 StatusCode，如成功就是 200 ；

Response.statusText 是 StatusCode 的描述文本，如成功就是 OK ；

Response.ok 一个 Boolean 类型的值，判断是否正常返回，也就是 StatusCode 为 200-299 。

fetch请求实例

1.使用get方式进行网络请求，例如：

fetch('http://nero-zou.com/test', {
method: 'GET'
}).then(function(response) {
//获取数据,数据处理
}).catch(function(err) {
//错误处理
});

2.使用post方式进行网络请求，例如：

let param = {user:'xxx',phone:'xxxxxx'};
fetch(url, {
method: 'post',
body: JSON.stringify(param)
}).then(function(response) {
//获取数据,数据处理
});

3.其它写法，例如：

try {
fetch(url, {
method: 'post',
body: JSON.stringify(param)
}).then(function(response) {
//获取数据,数据处理
});
} catch(e) {
//捕获异常消息
}

4.带header 或其它参数，例如：

fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})

fetch请求并填充界面