fetch跨域問(wèn)題的使用詳解
一、介紹
fetch 提供了一個(gè)獲取資源的接口 (包括跨域)。
fetch 的核心主要包括:Request , Response , Header , Body
利用了請(qǐng)求的異步特性 --- 它是基于 promise 的
1.作用:fetch這個(gè)API, 是專(zhuān)門(mén)用來(lái)發(fā)起Ajax請(qǐng)求的;
fetch('/url').then(data=>{ return data.text(); }).then(ret=>{ //注意,這里才是得到的最終數(shù)據(jù) console.log(ret); });
2.fetch是由原生JS提供的API,專(zhuān)門(mén)用來(lái)取代XHR這個(gè)對(duì)象的;
fetch("請(qǐng)求的url地址") .then(response => res.json() ) .then(data => console.log(data)) //注意: 第一個(gè).then 中獲取到的不是最終數(shù)據(jù),而是一個(gè)中間的數(shù)據(jù)流對(duì)象; // 注意: 第一個(gè) .then 中獲取到的數(shù)據(jù), 是一個(gè) Response 類(lèi)型對(duì)象; // 注意: 第二個(gè) .then 中,獲取到的才是真正的 數(shù)據(jù);
3.發(fā)起Get 請(qǐng)求
// 默認(rèn) fetch("url") 的話, 發(fā)起的是 Get 請(qǐng)求 fetch("url") .then(response => { //這個(gè) response 就是 服務(wù)器返回的可讀數(shù)據(jù)流, 內(nèi)部存儲(chǔ)的是二進(jìn)制數(shù)據(jù) // .json() 的作用,就是 讀取 response 這個(gè)二進(jìn)制數(shù)據(jù)流,并把 讀取到的數(shù) // 據(jù),轉(zhuǎn)為 JSON 格式的Promise 對(duì)象 return response.json() }) .then(data => { //這離 第二個(gè) .then 中拿到的 data, 就是最終的數(shù)據(jù) console.log(data) })
4.發(fā)起Post請(qǐng)求
var sendDate = new URLSearchParams() sendDate.append("name",'ls') sendDate.append("age", 30) fetch("url", { method: "post", body: sendDate //要發(fā)給服務(wù)器的數(shù)據(jù) }) .then(response => response.json()) .then(data => console.log(data))
fetch(URL, { method: 'post', body:JSON.stringify(obj), headers:{ 'Content-Type': 'application/json' } }) .then(function (response) { return response.text(); }) .then(function (myJson) { alert(myJson); });
到此這篇關(guān)于fetch跨域問(wèn)題的使用詳解的文章就介紹到這了,更多相關(guān)fetch跨域問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript Fetch API請(qǐng)求和響應(yīng)攔截詳解
- JS中fetch()用法實(shí)例詳解
- 深入學(xué)習(xí)JS?XML和Fetch請(qǐng)求
- JavaScript中fetch()用法實(shí)例
- 一文掌握ajax、fetch和axios的區(qū)別對(duì)比
- JavaScript使用Fetch的方法詳解
- AJAX原理以及axios、fetch區(qū)別實(shí)例詳解
- 聊一聊數(shù)據(jù)請(qǐng)求中Ajax、Fetch及Axios的區(qū)別
- ajax和fetch的區(qū)別點(diǎn)總結(jié)
- fetch網(wǎng)絡(luò)請(qǐng)求封裝示例詳解
- fetch()函數(shù)說(shuō)明與使用方法詳解
相關(guān)文章
Bootstrap每天必學(xué)之導(dǎo)航條(二)
Bootstrap每天必學(xué)之導(dǎo)航條,進(jìn)一步向大家講解了導(dǎo)航條養(yǎng)殖,以及導(dǎo)航條中元素的使用方法,感興趣的小伙伴們可以參考一下2016-03-03uniapp實(shí)現(xiàn)附近商家定位的示例代碼
本文主要介紹了uniapp實(shí)現(xiàn)附近商家定位的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08使用JS解析excel文件的完整實(shí)現(xiàn)步驟
解析excel文件是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于使用JS解析excel文件的完整實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10刷新頁(yè)面的幾種方法小結(jié)(JS,ASP.NET)
本篇文章只要是對(duì)刷新頁(yè)面的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹,包括JS與ASP.NET。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01