在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。
我的源博客地址：
在 AJAX 时代，进行请求 API 等网络请求都是通过
或者封装后的框架进行网络请求。
现在产生的
框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行 Hybrid App 开发的时候，如我之前介绍的
和 ，都可以使用 fetch 进行完美的网络请求。
1. fetch 初体验
在 Chrome 浏览器中已经全局支持了 fetch 函数，打开调试工具，在 Console 中可以进行初体验。
先不考虑跨域请求的使用方法，我们先请求同域的资源，如在我的博客页面中，打开 Console 进行如下请求。
fetch(&&).then(function(response){console.log(response)})
返回的数据：
这样就很快速地完成了一次网络请求，我们发现返回的数据也比之前的 XMLHttpRequest 丰富、易用的多。
2. 关于 fetch 标准概览
虽然 fetch 还不是作为一个稳定的标准发布，但是在其一直迭代更新的
中，我们发现已经包含了很多的好东西。
fetch 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容，如 HTTP Method，HTTP Headers，Request，Response。
3. fetch 的使用
3.1 兼容浏览器的处理
可以通过下面的语句处理浏览器兼容的问题。
if(self.fetch) {
// 使用 fetch 框架处理
// 使用 XMLHttpRequest 或者其他封装框架处理
3.2 一般构造请求的方法
使用 fetch 的构造函数请求数据后，返回一个
对象，处理即可。
.then(function(response){
// do something...
3.3 fetch 构成函数的其他选项
我们可以将于 HTTP Headers 兼容的格式加入到请求的头中，如每次 API 的请求我们想不受缓存的影响，那么可以像下面这样请求：
fetch(&&, {
headers: {
'Cache-Control': 'no-cache'
.then(function(response){
// do something...
具体的可选参数可以查看 。
如我们还可以这样使用：
var myHeaders = new Headers();
myHeaders.append(&Content-Type&, &text/plain&);
myHeaders.append(&Content-Length&, content.length.toString());
myHeaders.append(&X-Custom-Header&, &ProcessThisImmediately&);
var myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
fetch(&&, myInit)
.then(function(response){
// do something...
3.4 返回的数据结构
在请求后的 Response 中，具体的定义在 。
常用的有：
Response.status 也就是 StatusCode，如成功就是 200；
Response.statusText 是 StatusCode 的描述文本，如成功就是 OK；
Response.ok 一个 Boolean 类型的值，判断是否正常返回，也就是 StatusCode 为 200-299。
做如下请求：
.then(function(response){
console.log(response.status);
console.log(response.statusText);
console.log(response.ok);
返回的数据：
3.5 Body 参数
因为在 Request 和 Response 中都包含 Body 的实现，所以包含以下类型：
ArrayBuffer
ArrayBufferView (Uint8Array and friends)
URLSearchParams
在 fetch 中实现了对应的方法，并返回的都是 Promise 类型。
这样处理返回的数据类型就会变的特别地方便，如处理 json 格式的数据：
var myRequest = new Request('/products.json');
fetch(myRequest).then(function(response) {
return response.json().then(function(json) {
for(i = 0; i & json.products. i++) {
var name = json.products[i].N
var price = json.products[i].P
// do something more...
4. 浏览器兼容
目前项目给出的浏览器支持如下图，可以通过上面介绍的浏览器兼容处理办法解决此问题，不过相信很快就不需要考虑兼容问题了，在 Hybrid App 开发中使用基本没有问题，因为基本都是基于 Node.js 进行开发的。
这里是一个格式更好的文档，比标准描述的页面更加清晰，供参考。
在使用 React Native 开发 App 的时候接触到了 fetch，发现的确非常方便高效，框架的设计模式也非常清晰灵活，更多的细节可以查阅相关文档，有什么问题可以留言讨论交流。
阅读(...) 评论()fetch跨域调用第三方API获取数据时要怎么设置_问答_ThinkSAAS
fetch跨域调用第三方API获取数据时要怎么设置
fetch跨域调用第三方API获取数据时要怎么设置
如题，代码如下：
const URL = '/?q='
let req = URL + word
fetch(req)
.then(res =& res.json())
.then(res =& console.log(res)
.catch(err =& console.log(err)
在本地调试的时候，由于跨域不能访问，请问跨域的情况下该如何使用fetch
你的/?q=返回header里有吗？
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信2119人阅读
web前端（79）
fetch 同 XMLHttpRequest 非常类似，都是用来做网络请求。但是同复杂的XMLHttpRequest的API相比，fetch使用了Promise，这让它使用起来更加简洁，从而避免陷入”回调地狱”。
比如，如果我们想要实现这样一个需求：请求一个URL地址，获取响应数据并将数据转换成JSON格式。使用fetch和XMLHttpRequest实现的方式是不同的。
使用XMLHttpRequest实现
使用XMLHttpRequest来实现改功能需要设置两个监听函数，分别用来处理成功和失败的情况，同时还需要依次调用open()和send()方法才能实现请求。
function reqListener() {
var data = JSON.parse(this.responseText);
console.log(data);
function reqError(err) {
console.log('Fetch Error : %S', err);
var oReq = new XMLHttpRequest();
oReq.onload = reqL
oReq.onerror = reqE
oReq.open('get', './api/some.json', true);
oReq.send();
使用fetch实现
使用fetch来实现是这样的：
fetch('./api/some.json')
.then(function(res) {
if (res.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + res.status);
res.json().then(function(data) {
console.log(data);
.catch(function(err) {
console.log('Fetch Error : %S', err);
在将响应的文本信息转换成JSON格式前，需要先确保响应的状态码为200。
fetch()请求后返回的响应是一个stream对象，这就意味着我们在调用json()方法后会返回一个Promise，因为读取stream的过程是异步操作的。
响应中的元数据
在上面的例子中，我们可以查看响应对象的状态码，也知道了如何将响应转换成JSON格式的数据。但其实我们可以访问的元数据还有以下这些：
fetch("users.json").then(function(res) {
console.log(res.headers.get('Content-Type'));
console.log(res.headers.get('Data'));
console.log(res.status);
console.log(res.statusText);
console.log(res.type);
console.log(res.url);
当我们发送fetch请求时，返回的res.type可能是basic、cors或opaque中的一种。这些类型可以告知我们资源从何而来，这样就能知道该如何处理响应对象。
当我们请求的是同一域下的资源时，响应返回的类型为basic，此时没有任何限制，我们可以查看响应中的任何数据。
如何请求的是跨域资源，那么会返回一个CORS类型的头部，并且响应类型为cors。这种类型跟上面的basic非常相似，只是它对响应头部的字段访问有限制，你只可以访问这些属性：
Cache-Control
Content-Language
Content-Type
Last-Modified
Opaque 类型的响应也是访问跨域资源的时候产生的，只是响应头不是CORS类型的响应头而已。如果是这种类型的响应，那么我们就不能读取返回的数据，也不能查看请求的状态码，这就是意味着我们将无法确定请求是成功了还是失败了。目前在fetch()的实现中，无法请求跨域的资源。
我们可以为fetch请求定义mode属性，来保证只有符合条件的请求才会被处理。可以设置的mode属性值如下：
same-origin
只有请求相同域下的资源才能成功，其他请求均被拒绝。
允许请求同域或者跨域资源，但是跨域必须返回相应的跨域请求头部。
cors-with-forced-preflight
在发出实际请求前先做preflight检查。
针对跨域资源做请求，但是不返回CORS的响应头，这是属于opaque类型的响应（window下无法使用）
在使用mode时，需要将fetch请求的第二个参数作为配置对象，并在其中配置具体的模式，如下代码：
fetch("/cors-enabled/some.json",{mode: 'cors'})
.then(function(res){
return res.text();
.then(function(text) {
console.log('Request successfully', text);
.catch(function(err) {
console.log('Request failed', error)
Promise 方法链
Promise 的特性之一就是可以实现链式调用，fetch也可以使用该特性，同时，使用链式调用可以让请求的处理逻辑更加通用。
如果使用接口反馈的JSON格式数据，那么针对每次响应，我们都需要检查响应状态并做JSON格式转换。其实还能简化代码，那就是把状态监测和JSON转换的代码放到单独的函数中去。比如：
function status(res) {
if (res.status &= 200 && res.status & 300) {
return Promise.resolve(response)
return Promise.reject(new Error(res.statusText))
function json(res) {
return res.json()
fetch('user.json')
.then(status)
.then(json)
.then(function(data) {
console.log('Request succeeded with JSON response', data);
.catch(function(err) {
console.log('Request failed', error);
在上面的代码中，我们定义了一个status方法来检查response.status 的状态，根据结果不同返回Promise.resolve()
或 Promise.reject() ，这是fetch()方法链中的第一个方法调用。如果返回resolve状态，我们会继续调用json()，从而返回response.json()的执行结果。经过这些处理完我们已经可以获取解析后的JSON对象。如果解析失败，Promise返回reject状态，执行catch里的代码进行错误处理。
这么编码更大的好处在于，你可以在所有的fetch请求中使用上面的逻辑代码，从而让代码变得更加容易阅读、维护和测试。
使用fetch 请求发送凭证信息
如果我们想在fetch请求中带一些凭证信息，比如cookie等，我们应该将请求中的credentials设置为include：
credentials: 'include'
注意： 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
Response相关属性及方法
标记返回值是否被使用过
这样设计的目的是为了之后兼容基于流的API，让应用一次消费data，这样就允许了JavaScript处理大文件例如视频，并且可以支持实时压缩和编辑。
fetch('/test/content.json').then(function(res){
console.log(res.bodyUsed); // false
var data = res.json();
console.log(res.bodyUsed); //true
}).then(function(data){
console.log(data);
}).catch(function(error){
console.log(error);
返回Headers对象，该对象实现了Iterator，可通过for…of遍历
fetch('/test/content.json').then(function(res){
var headers = res.
console.log(headers.get('Content-Type')); // application/json
console.log(headers.has('Content-Type')); // true
console.log(headers.getAll('Content-Type')); // ["application/json"]
for(let key of headers.keys()){
console.log(key); // datelast-modified server accept-ranges etag content-length content-type
for(let value of headers.values()){
console.log(value);
headers.forEach(function(value, key, arr){
console.log(value); // 对应values()的返回值
console.log(key); // 对应keys()的返回值
return res.json();
}).then(function(data){
console.log(data);
}).catch(function(error){
console.log(error);
是否正常返回
代表状态码在200-299之间
状态码( 200表示 成功)
statusText
状态描述 (‘OK’表示 成功)
basic：正常的，同域的请求，包含所有的headers。排除Set-Cookie和Set-Cookie2。
cors：Response从一个合法的跨域请求获得，一部分header和body可读。
error：网络错误。Response的status是0，Headers是空的并且不可写。当Response是从Response.error()中得到时，就是这种类型。
opaque： Response从"no-cors"请求了跨域资源。依靠Server端来做限制。
返回完整的url字符串。如：’’
arrayBuffer()
返回ArrayBuffer类型的数据的Promise对象
返回Blob类型的数据的Promise对象
生成一个Response的克隆
body只能被读取一次，但clone方法就可以得到body的一个备份
克隆体仍然具有bodyUsed属性，如果被使用过一次，依然会失效
fetch('/test/content.json').then(function(data){
var d = data.clone();
d.text().then(function(text){
console.log(JSON.parse(text));
return data.json();
}).then(function(data){
console.log(data);
}).catch(function(error){
console.log(error);
返回JSON类型的数据的Promise对象
返回Text类型的数据的Promise对象
formData()
返回FormData类型的数据的Promise对象
fetch基本用法
fetch('/test/content.json').then(function(data){
return data.json();
}).then(function(data){
console.log(data);
}).catch(function(error){
console.log(error);
fetch('/test/content.json', {
method: 'POST',
mode: 'same-origin',
credentials: 'include',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
body: 'a=1&b=2'
}).then(function(res){ res: fetch事实标准中可以通过Response相关api进行设置
return res.json();
}).then(function(data){
console.log(data);
}).catch(function(error){
fetch不足之处
无法监控读取进度和中断请求
Promises缺少了一些重要的XMLHttpRequest的使用场景。例如， 使用标准的ES6 Promise你无法收集进入信息或中断请求。而Fetch的狂热开发者更是试图提供Promise API的扩展用于取消一个Promise。 这个提议有点自挖墙角的意思，因为将这将让Promise变得不符合标准。但这个提议或许会导致未来出现一个可取消的Promise标准。 但另一方面，使用XMLHttpRequest你可以模拟进度（监听progress事件），也可以取消请求（使用abort()方法）。 但是，如果有必要你也可以使用Promise来包裹它
浏览器支持
目前Chrome 42+, Opera 29+, 和Firefox 39+都支持Fetch。微软也考虑在未来的版本中支持Fetch。 讽刺的是，当IE浏览器终于微响应实现了progress事件的时候，XMLHttpRequest也走到了尽头。 目前，如果你需要支持IE的话，你需要使用一个polyfill库。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：66457次
积分：1602
积分：1602
排名：第19235名
原创：81篇
转载：13篇
评论：17条
(1)(2)(5)(5)(2)(4)(2)(3)(7)(41)(13)(1)(7)(1)(3)1118人阅读
Fetch以后是趋势，势必要取代传统的Ajax，而且RN框架支持Fetch。下面仅做了一个跨域请求的例子，在本域请求是一样的，而且更简单一些。客户端环境用的是RN写的一个页面，也可以用浏览器的console控制台模拟。后端服务用的是NodeJs express框架。
1）Fetch请求
//发送Ajax请求
sendAjax(){
//POST方式,IP为本机IP
fetch(&http://192.168.111.102:8085&, {
method: &POST&,
mode: &cors&,
headers: {
&Content-Type&: &application/x-www-form-urlencoded&
body: 'key=1'
}).then(function (res) {
console.log(&fetch request &, JSON.stringify(res.ok));
if(res.ok){
res.json().then(function (json) {
Alert.alert('提示','来自后台数据：名字'+json.name+'、年龄'+json.age,[{text: '确定', onPress: () =& console.log('OK Pressed!')},]);
Alert.alert('提示','请求失败',[{text: '确定', onPress: () =& console.log('OK Pressed!')},]);
}).catch(function (e) {
console.log(&fetch fail&);
Alert.alert('提示','系统错误',[{text: '确定', onPress: () =& console.log('OK Pressed!')},]);
1、mode属性控制是否允许跨域。same-origin（同源请求）、no-cors（默认）和cros（允许跨域请求），第一种跨域求情会报error，第二种可以请求其他域的脚本、图片和其他资源，但是不能访问response里面的属性，第三种可以获取第三方数据，前提是所访问的服务允许跨域访问。否则，会出现如下错误：
2、Fetch请求后台时，返回时一个Promise对象。对象支持解析返回数据的方法有：arrayBuffer()、blob()、formData()、json()、text()。
3、Body传入参数，注意！注意！注意！重要的事情说三次，只能传啊a=1&b=2...这种参数形式，不可传对象{a:1,b:2,...},用JSON.stringify({a:1,b:2,...})也不行。在jquery中，传入对象框架会自动封装成formData的形式，fetch没有这个功能。
4、使用时请注意浏览器版本，低版本不支持此对象。RN是可以用的
2）Nodejs express框架开启允许跨域请求：//设置跨域访问
app.all('*', function(req, res, next) {
res.header(&Access-Control-Allow-Origin&, &*&);
res.header(&Access-Control-Allow-Headers&, &X-Requested-With&);
res.header(&Access-Control-Allow-Methods&,&PUT,POST,GET,DELETE,OPTIONS&);
res.header(&X-Powered-By&,' 3.2.1');
res.header(&Content-Type&, &application/charset=utf-8&);
});3）Nodejs express框架开启处理POST数据功能，默认POST请求的参数是在请求体里面，用res.query是获取不到的，为{}；需要使用res.body获取，前提是要在express框架里面开启body解析功能，否则显示undefined。
var express = require('express');
//Post方式请求参数放在请求体里面，需引用body-parser解析body
var bodyParser = require(&body-parser&);
var app = express();
app.use(bodyParser.urlencoded({ extended: false }));4）支持jsonp方式跨域访问，开启跨域访问后用传统的jsonp方式请求时，会报错。因为jsonp请求需要返回一个callback包裹的数据，否则解析出错。此处有一个坑，用$.ajax({method:’POST’,dataType:’jsonp’})方式请求时，依然发送的是GET请求。
//json数据
var  data  =   { &name&:   &Test&,   &age&:   &19& };
app.get('/', function(req, res) {
console.log('get..........');
console.log(req.query);
if (req.query && req.query.callback) {
var str = req.query.callback + &(& + JSON.stringify(data) + &)&; //jsonp  
console.log('jsonp: '+str);
res.end(str);
console.log('json: '+JSON.stringify(data));
res.end(JSON.stringify(data));
});5）完整代码：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2655次
排名：千里之外}