このAPIは、だから、フェッチされます
取得使用
生活水準をフェッチ
互換性window.fetchポリフィル
1.概要
fetch(url/request[, options])
var request = new Request(url/request[, options]);
フェッチ グローバルウィンドウの方法であって、 要求 Requestオブジェクトであり、同じパラメータ及び要求パラメータフェッチ オプションを 次のようにオブジェクト、主キーです。
1 2 3 4 5 6 7 8 9 10 11
方法等、/ POSTをGET 通常のオブジェクト、またはヘッダの目標:ヘッダー 本体:メソッドはGET / HEADである場合、サーバに渡されるデータは、文字列/バッファ/ BLOB /いるFormDataであってもよく、このパラメータはできません CORS:モード/無CORS /同一生成元 、 クロスドメイン、CORS-デフォルトかどうかはNOである 資格情報:オミット/原点と同じ、/含ま キャッシュをデフォルト/ NO-ストア/リロード/ NO-キャッシュ/キャッシュ・フォース/のみ-IF-キャッシュされました リダイレクト:フォロー/エラー/マニュアル 参照元:NO-リファラ/クライアント/またはURLの referrerPolicy:リファラ-NO / NO-とき、リファラダウングレード/起源/原点とき、クロスオリジン/ URL-危険な インテグリティ:リソースの整合性検証 の約束を返すので、それを使用)(フェッチ
約束は結果/コールバックを処理するために使用されるAPIをフェッチ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
フェッチ( '/一部/ URL' ).then( 関数 ( 応答 ) { 。})キャッチ( 関数 ( ERR ) { })。 FETCH( 「/いくつか/ URL」 ).then( 機能 ( レスポンス ) { リターン })。次に、( 関数 ( returnedValue ) { })。キャッチ( 関数 ( ERR ) { } );
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
するvar ヘッダ= 新新 )(ヘッダを。 headers.append( 'Content-Typeの' 、 'テキスト/平野'を ); headers.append( 'カスタム-X -マイ-ヘッダー' 、 'CustomValue' ); headers.has( 「種類-コンテンツ」を ;) headers.get( 「種類-コンテンツ」 ); headers.set( 'Content-Typeの' 、 'ファイルアプリケーション/ JSON' ); headers.delete( 「カスタムX -マイヘッダー」 )。 するvar ヘッダー= 新しい新しい ({ヘッダ 'タイプのコンテンツ' : 'text / plainの' 、 'X-ヘッダマイ-Rカスタム' : 'CustomValue' })。
ヘッダは、メソッドをオブジェクト:
1 2 3 4 5 6 7 8 9
append(key, value) delete(key) entries() 返回一个遍历器,类似二维数组,每一个 key 和它对应的 value 构成一个数组 get(key) 获取指定 key 的value,如果key被添加了多次,则返回第一次添加时的 value getAll(key) 返回 key 对应的所有 value,组成一个数组 has(key) keys() 所有 key 组成的遍历器 set(key, value) 更改 key 的值,如果 key 不存在,则相当于 append values() 所有 value 组成的遍历器
1 2 3 4 5 6 7 8
var request = new Request('/some-url' , { headers: new Headers({ 'Content-Type' : 'text/plain' }) }); fetch(request).then(function ( ) { });
3. Request
Request接口
var request = new Request(url/request[, options]);
Request 对象表示一次 fetch 调用的请求信息。
属性(全部只读):
1 2 3 4 5 6 7 8 9
method - 支持 GET, POST, PUT, DELETE, HEAD url - 请求的 URL headers - 对应的 Headers 对象 referrer - 请求的 referrer 信息 mode - 可以设置 cors, no-cors, same-origin credentials - 设置 cookies 是否随请求一起发送。可以设置: omit, same-origin redirect - follow, error, manual integrity - subresource 完整性值(integrity value) cache - 设置 cache 模式 (default, reload, no-cache)
示例:
1 2 3 4 5 6 7 8 9 10 11
var request = new Request('/users.json' , { method: 'POST' , mode: 'cors' , redirect: 'follow' , headers: new Headers({ 'Content-Type' : 'text/plain' }) }); fetch(request).then(function ( ) { });
在 Request 对象创建完成之后, 所有的属性都变为只读属性。一个 Request 就代表一串流(stream), 如果想要传递给另一个 fetch 方法,则需要进行克隆(clone 方法)。
4. Response
Response接口
var response = new Response([body][, init])
Response 代表响应, fetch 的 then 方法接收一个 Response 实例。
属性:
1 2 3 4 5 6 7 8 9
headers //与响应相关联的 Headers 对象 ok //Boolean值,代表成功响应。status在 200 和 299 之间为 true redirected //表示该Response是否来自一个重定向,如果是的话,它的URL列表将会有多个 status //状态码 (例如: 200, 404, 等等) statusText //状态值(例如: OK) type //类型 basic / cors / error / opaque
大专栏 同源和跨域(三)Fetch API span>url //包含这个请求的URL bodyUsed //存储一个Boolean判断主体是否已经被用于一个响应中 useFinalURL //Boolean 值, 代表 url 是否是最终 URL
方法:
1 2 3 4 5 6 7 8
clone() - 创建一个新的 Response 克隆对象. error() - 返回一个新的,与网络错误相关的 Response 对象. redirect() - 重定向,使用新的 URL 创建新的 response 对象.. arrayBuffer() - Returns a promise that resolves with an ArrayBuffer. blob() - 返回一个 promise, resolves 是一个 Blob. formData() - 返回一个 promise, resolves 是一个 FormData 对象. json() - 返回一个 promise, resolves 是一个 JSON 对象. text() - 返回一个 promise, resolves 是一个 USVString (text).
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13
var response = new Response('.....' , { ok: false , status: 404 , url: '/' }); fetch('/' ) .then(function (responseObj ) { console .log('status: ' , responseObj.status); });
5. 处理 JSON响应
封装了 JSON.parse(jsonString)
1 2 3 4 5 6 7
fetch('https://xxx.json' ).then(function (response ) { return response.json(); }).then(function (j ) { console .log(j); });
6. 处理 Text / HTML响应
1 2 3 4 5 6 7
fetch('/next/page' ) .then(function (response ) { return response.text(); }).then(function (text ) { console .log(text); });
7. 处理Blob结果
Blob表示二进制原始数据,一个Blob对象就是一个包含有只读原始数据的类文件对象。
Blob File API
创建blob
1. 通过构造函数
1 2 3 4
var blob = new Blob(dataArr:Array<any>, opt:{type:string}); //dataArray:数组,包含了要添加到Blob对象中的数据,数据可以是任意多个ArrayBuffer,ArrayBufferView, Blob,或者 DOMString对象。 //opt:对象,用于设置Blob对象的属性(如:MIME类型)
2. 通过Blob.slice()
1 2 3 4 5
Blob.slice(start:number, end:number, contentType:string) \start:开始索引,默认为0 \end:截取结束索引(不包括end) \contentType:新Blob的MIME类型,默认为空字符串
3. 通过canvas.toBlob()
1 2 3 4
var canvas = document .getElementById("canvas" );canvas.toBlob(function (blob ) { console .log(blob); });
应用 https://www.cnblogs.com/hhhyaaon/p/5928152.html
通过Blob.slice方法,可以将大文件分片,轮循向后台提交各文件片段,即可实现文件的分片上传。
window.URL对象可以为Blob对象生成一个网络地址,结合a标签的download属性,可以实现点击url下载文件。
把图片转化为Blob对象,生成URL(URL.createObjectURL(blob)),来显示图片。
通过 fetch 加载图像或者其他二进制数据
1 2 3 4 5 6 7
fetch('flowers.jpg' ) .then(function (response ) { return response.blob(); }) .then(function (imageBlob ) { document .querySelector('img' ).src = URL.createObjectURL(imageBlob); });
8. 提交表单数据(Posting Form Data)
1 2 3 4 5 6 7 8 9 10 11 12 13
fetch('/submit' , { method: 'post' , body: new FormData(document .getElementById('comment-form' )) }); fetch('/submit-json' , { method: 'post' , body: JSON .stringify({ email: document .getElementById('email' ).value answer: document .getElementById('answer' ).value }) });
9. 跨域
https://www.zhihu.com/question/47029864/answer/150069385 如果服务器支持 CORS, 则在客户端设置相应的 Access-Control-Allow-Origin
即可得到数据。
1 2 3 4 5 6 7 8 9 10 11
let myHeaders = new Headers({ 'Access-Control-Allow-Origin': '*', 'Content-Type': 'text/plain' }); fetch(url, { method: 'GET', headers: myHeaders, mode: 'cors' }) .then((res) => { // TODO })
10. 在fetch中使用jsonp
JSONP only supports GET method, same as fetch-jsonp .
参考文章
https://segmentfault.com/a/1190000007455901 http://blog.csdn.net/renfufei/article/details/51494396 https://davidwalsh.name/fetch