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)文章
使用js和canvas實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了使用js和canvas實(shí)現(xiàn)時(shí)鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例
這篇文章主要介紹了JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例,本文直接給出了實(shí)現(xiàn)的源碼,并給出了使用示例,需要的朋友可以參考下2015-03-03
JS彈出層遮罩,隱藏背景頁(yè)面滾動(dòng)條細(xì)節(jié)優(yōu)化分析
下面小編就為大家?guī)?lái)一篇JS彈出層遮罩,隱藏背景頁(yè)面滾動(dòng)條細(xì)節(jié)優(yōu)化分析。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04
簡(jiǎn)單了解JavaScript操作XPath的一些基本方法
XPath構(gòu)建于XML之上,以表示路徑的方式來(lái)確定XML中元素位置,事實(shí)上并不是太常用,這里我們來(lái)簡(jiǎn)單了解JavaScript操作XPath的一些基本方法2016-06-06
阻止子元素繼承父元素事件具體思路及實(shí)現(xiàn)
想要阻止點(diǎn)擊#p_cont區(qū)域時(shí)觸發(fā)a事件,需要在#p_cont區(qū)域內(nèi)加入阻止事件冒泡的代碼,具體實(shí)現(xiàn)祥看本文,希望對(duì)你有所幫助2013-05-05
使用localStorage替代cookie做本地存儲(chǔ)
這篇文章主要為大家詳細(xì)介紹了使用localStorage替代cookie做本地存儲(chǔ),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09
web網(wǎng)頁(yè)按比例顯示圖片實(shí)現(xiàn)原理及js代碼
由于上傳圖片的大小是未知的,在顯示成縮略圖的時(shí)候必須進(jìn)行按比例的縮放才能美觀地顯示,本文將為大家簡(jiǎn)單的介紹一種比較不錯(cuò)的方法,有此需求的朋友可以參考下2013-08-08
JavaScript優(yōu)化以及前段開(kāi)發(fā)小技巧
隨著前端技術(shù)的發(fā)展,前端業(yè)務(wù)越來(lái)越繁重,這大大增加了JS代碼量。因此,要提高Web的性能,我們不僅需要關(guān)注頁(yè)面加載的時(shí)間,還要注重在頁(yè)面上操作的響應(yīng)速度。那么,接下來(lái)我們討論幾種能夠提高JavaScript效率的方法。2017-02-02

