您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“前端進(jìn)行網(wǎng)絡(luò)請(qǐng)求的方式有哪些”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“前端進(jìn)行網(wǎng)絡(luò)請(qǐng)求的方式有哪些”這篇文章吧。
大多數(shù)情況下,在前端發(fā)起一個(gè)網(wǎng)絡(luò)請(qǐng)求我們只需關(guān)注下面幾點(diǎn):
傳入基本參數(shù)(url,請(qǐng)求方式)
請(qǐng)求參數(shù)、請(qǐng)求參數(shù)類型
設(shè)置請(qǐng)求頭
獲取響應(yīng)的方式
獲取響應(yīng)頭、響應(yīng)狀態(tài)、響應(yīng)結(jié)果
異常處理
攜帶cookie設(shè)置
跨域請(qǐng)求
form表單、ifream、刷新頁面
Ajax - 異步網(wǎng)絡(luò)請(qǐng)求的開山鼻祖
jQuery - 一個(gè)時(shí)代
fetch - Ajax的替代者
axios、request等眾多開源庫
Ajax的出現(xiàn)解決了什么問題
原生Ajax如何使用
jQuery的網(wǎng)絡(luò)請(qǐng)求方式
fetch的用法以及坑點(diǎn)
如何正確的使用fetch
如何選擇合適的跨域方式
帶著以上這些問題、關(guān)注點(diǎn)我們對(duì)幾種網(wǎng)絡(luò)請(qǐng)求進(jìn)行一次全面的分析。
在Ajax出現(xiàn)之前,web程序是這樣工作的:
這種交互的的缺陷是顯而易見的,任何和服務(wù)器的交互都需要刷新頁面,用戶體驗(yàn)非常差,Ajax的出現(xiàn)解決了這個(gè)問題。Ajax全稱Asynchronous JavaScript + XML(異步JavaScript和XML)
使用Ajax,網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上,而不需要重載(刷新)整個(gè)頁面。
Ajax本身不是一種新技術(shù),而是用來描述一種使用現(xiàn)有技術(shù)集合實(shí)現(xiàn)的一個(gè)技術(shù)方案,瀏覽器的XMLHttpRequest是實(shí)現(xiàn)Ajax最重要的對(duì)象(IE6以下使用ActiveXObject)。
盡管X在Ajax中代表XML, 但由于JSON的許多優(yōu)勢(shì),比如更加輕量以及作為Javascript的一部分,目前JSON的使用比XML更加普遍。
這里主要分析XMLHttpRequest對(duì)象,下面是它的一段基礎(chǔ)使用:
var xhr = new XMLHttpRequest();
xhr.open('post','www.xxx.com',true)
// 接收返回值
xhr.function(){
if(xhr.readyState === 4 ){
if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}
}
}
// 處理請(qǐng)求參數(shù)
postData = {"name1":"value1","name2":"value2"};
postData = (function(value){
var dataString = "";
for(var key in value){
dataString += key+"="+value[key]+"&";
};
return dataString;
}(postData));
// 設(shè)置請(qǐng)求頭
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 異常處理
xhr.{
console.log('Network request failed')
}
// 跨域攜帶cookie
xhr.withCredentials = true;
// 發(fā)出請(qǐng)求
xhr.send(postData);
復(fù)制代碼
下面分別對(duì)XMLHttpRequest對(duì)象常用的的函數(shù)、屬性、事件進(jìn)行分析。
open
用于初始化一個(gè)請(qǐng)求,用法:
xhr.open(method, url, async);
復(fù)制代碼
method:請(qǐng)求方式,如get、post
url:請(qǐng)求的url
async:是否為異步請(qǐng)求
send
用于發(fā)送HTTP請(qǐng)求,即調(diào)用該方法后HTTP請(qǐng)求才會(huì)被真正發(fā)出,用法:
xhr.send(param)
復(fù)制代碼
param:http請(qǐng)求的參數(shù),可以為string、Blob等類型。
abort
用于終止一個(gè)ajax請(qǐng)求,調(diào)用此方法后readyState將被設(shè)置為0,用法:
xhr.abort()
復(fù)制代碼
setRequestHeader
用于設(shè)置HTTP請(qǐng)求頭,此方法必須在open()方法和send()之間調(diào)用,用法:
xhr.setRequestHeader(header, value);
復(fù)制代碼
getResponseHeader
用于獲取http返回頭,如果在返回頭中有多個(gè)一樣的名稱,那么返回的值就會(huì)是用逗號(hào)和空格將值分隔的字符串,用法:
var header = xhr.getResponseHeader(name);
復(fù)制代碼
readyState
用來標(biāo)識(shí)當(dāng)前XMLHttpRequest對(duì)象所處的狀態(tài),XMLHttpRequest對(duì)象總是位于下列狀態(tài)中的一個(gè):
status
表示http請(qǐng)求的狀態(tài), 初始值為0。如果服務(wù)器沒有顯式地指定狀態(tài)碼, 那么status將被設(shè)置為默認(rèn)值, 即200。
responseType
表示響應(yīng)的數(shù)據(jù)類型,并允許我們手動(dòng)設(shè)置,如果為空,默認(rèn)為text類型,可以有下面的取值:
response
返回響應(yīng)的正文,返回的類型由上面的responseType決定。
withCredentials
ajax請(qǐng)求默認(rèn)會(huì)攜帶同源請(qǐng)求的cookie,而跨域請(qǐng)求則不會(huì)攜帶cookie,設(shè)置xhr的withCredentials的屬性為true將允許攜帶跨域cookie。
onreadystatechange
xhr.callback;
復(fù)制代碼
當(dāng)readyState屬性發(fā)生變化時(shí),callback會(huì)被觸發(fā)。
onloadstart
xhr.callback;
復(fù)制代碼
在ajax請(qǐng)求發(fā)送之前(readyState==1后, readyState==2前),callback會(huì)被觸發(fā)。
onprogress
xhr.function(event){
console.log(event.loaded / event.total);
}
復(fù)制代碼
回調(diào)函數(shù)可以獲取資源總大小total,已經(jīng)加載的資源大小loaded,用這兩個(gè)值可以計(jì)算加載進(jìn)度。
onload
xhr.callback;
復(fù)制代碼
當(dāng)一個(gè)資源及其依賴資源已完成加載時(shí),將觸發(fā)callback,通常我們會(huì)在onload事件中處理返回值。
onerror
xhr.callback;
復(fù)制代碼
當(dāng)ajax資源加載失敗時(shí)會(huì)觸發(fā)callback。
ontimeout
xhr.callback;
復(fù)制代碼
當(dāng)進(jìn)度由于預(yù)定時(shí)間到期而終止時(shí),會(huì)觸發(fā)callback,超時(shí)時(shí)間可使用timeout屬性進(jìn)行設(shè)置。
在很長一段時(shí)間里,人們使用jQuery提供的ajax封裝進(jìn)行網(wǎng)絡(luò)請(qǐng)求,包括$.ajax、$.get、$.post等,這幾個(gè)方法放到現(xiàn)在,我依然覺得很實(shí)用。
$.ajax({
dataType: 'json', // 設(shè)置返回值類型
contentType: 'application/json', // 設(shè)置參數(shù)類型
headers: {'Content-Type','application/json'},// 設(shè)置請(qǐng)求頭
xhrFields: { withCredentials: true }, // 跨域攜帶cookie
data: JSON.stringify({a: [{b:1, a:1}]}), // 傳遞參數(shù)
error:function(xhr,status){ // 錯(cuò)誤處理
console.log(xhr,status);
},
success: function (data,status) { // 獲取結(jié)果
console.log(data,status);
}
})
復(fù)制代碼
$.ajax只接收一個(gè)參數(shù),這個(gè)參數(shù)接收一系列配置,其自己封裝了一個(gè)jqXHR對(duì)象,有興趣可以閱讀一下jQuary-ajax 源碼
常用配置:
url
當(dāng)前頁地址。發(fā)送請(qǐng)求的地址。
type
類型:String 請(qǐng)求方式 ("POST" 或"GET"), 默認(rèn)為 "GET"。注意:其它HTTP請(qǐng)求方法,如PUT和 DELETE也可以使用,但僅部分瀏覽器支持。
timeout
類型:Number設(shè)置請(qǐng)求超時(shí)時(shí)間(毫秒)。此設(shè)置將覆蓋全局設(shè)置。
success
類型:Function 請(qǐng)求成功后的回調(diào)函數(shù)。
jsonp
在一個(gè)jsonp請(qǐng)求中重寫回調(diào)函數(shù)的名字。這個(gè)值用來替代在"callback=?"這種GET或POST請(qǐng)求中URL參數(shù)里的"callback"部分。
error 類型:Function 。請(qǐng)求失敗時(shí)調(diào)用此函數(shù)。
注意:源碼里對(duì)錯(cuò)誤的判定:
isSuccess = status >= 200 && status < 300 || status === 304;
復(fù)制代碼
返回值除了這幾個(gè)狀態(tài)碼都會(huì)進(jìn)error回調(diào)。
dataType
"xml": 返回 XML 文檔,可用 jQuery 處理。
"html": 返回純文本 HTML 信息;包含的 script 標(biāo)簽會(huì)在插入 dom 時(shí)執(zhí)行。
"script": 返回純文本 JavaScript 代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了 "cache" 參數(shù)。注意:在遠(yuǎn)程請(qǐng)求時(shí)(不在同一個(gè)域下),所有 POST 請(qǐng)求都將轉(zhuǎn)為 GET 請(qǐng)求。(因?yàn)閷⑹褂?DOM 的 script標(biāo)簽來加載)
"json": 返回 JSON 數(shù)據(jù) 。
"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時(shí),如 "myurl?callback=?" jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。
"text": 返回純文本字符串
復(fù)制代碼
data
類型:String 使用JSON.stringify轉(zhuǎn)碼
complete
類型:Function請(qǐng)求完成后回調(diào)函數(shù) (請(qǐng)求成功或失敗之后均調(diào)用)。
async
類型:Boolean 默認(rèn)值:true。默認(rèn)設(shè)置下,所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求,請(qǐng)將此選項(xiàng)設(shè)置為 false。
contentType
類型:String默認(rèn)值: "application/x-www-form-urlencoded"。發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型。
鍵值對(duì)這樣組織在一般的情況下是沒有什么問題的,這里說的一般是,不帶嵌套類型JSON,也就是 簡單的JSON,形如這樣:
{
a: 1,
b: 2,
c: 3
}
復(fù)制代碼
但是在一些復(fù)雜的情況下就有問題了。 例如在 Ajax中你要傳一個(gè)復(fù)雜的 json 對(duì)像,也就說是對(duì)象嵌數(shù)組,數(shù)組中包括對(duì)象,你這樣傳:application/x-www-form-urlencoded 這種形式是沒有辦法將復(fù)雜的JSON組織成鍵值對(duì)形式。
{
data: {
a: [{
x: 2
}]
}
}
復(fù)制代碼
可以用如下方式傳遞復(fù)雜的json對(duì)象
$.ajax({
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({a: [{b:1, a:1}]})
})
復(fù)制代碼
近年來前端MV*的發(fā)展壯大,人們?cè)絹碓缴俚氖褂胘Query,我們不可能單獨(dú)為了使用jQuery的Ajax api來單獨(dú)引入他,無可避免的,我們需要尋找新的技術(shù)方案。
尤雨溪在他的文檔中推薦大家用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求。axios基于Promise對(duì)原生的XHR進(jìn)行了非常全面的封裝,使用方式也非常的優(yōu)雅。另外,axios同樣提供了在node環(huán)境下的支持,可謂是網(wǎng)絡(luò)請(qǐng)求的首選方案。
未來必定還會(huì)出現(xiàn)更優(yōu)秀的封裝,他們有非常周全的考慮以及詳細(xì)的文檔,這里我們不多做考究,我們把關(guān)注的重點(diǎn)放在更底層的APIfetch。
Fetch API是一個(gè)用用于訪問和操縱HTTP管道的強(qiáng)大的原生 API。
這種功能以前是使用 XMLHttpRequest實(shí)現(xiàn)的。Fetch提供了一個(gè)更好的替代方法,可以很容易地被其他技術(shù)使用,例如 Service Workers。Fetch還提供了單個(gè)邏輯位置來定義其他HTTP相關(guān)概念,例如CORS和HTTP的擴(kuò)展。
可見fetch是作為XMLHttpRequest的替代品出現(xiàn)的。
使用fetch,你不需要再額外加載一個(gè)外部資源。但它還沒有被瀏覽器完全支持,所以你仍然需要一個(gè)polyfill。
一個(gè)基本的 fetch請(qǐng)求:
const options = {
method: "POST", // 請(qǐng)求參數(shù)
headers: { "Content-Type": "application/json"}, // 設(shè)置請(qǐng)求頭
body: JSON.stringify({name:'123'}), // 請(qǐng)求參數(shù)
credentials: "same-origin", // cookie設(shè)置
mode: "cors", // 跨域
}
fetch('http://www.xxx.com',options)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson); // 響應(yīng)數(shù)據(jù)
})
.catch(function(err){
console.log(err); // 異常處理
})
復(fù)制代碼
Fetch API提供了一個(gè)全局的fetch()方法,以及幾個(gè)輔助對(duì)象來發(fā)起一個(gè)網(wǎng)絡(luò)請(qǐng)求。
fetch()
fetch()方法用于發(fā)起獲取資源的請(qǐng)求。它返回一個(gè)promise,這個(gè) promise 會(huì)在請(qǐng)求響應(yīng)后被 resolve,并傳回 Response 對(duì)象。
Headers
可以通過Headers()構(gòu)造函數(shù)來創(chuàng)建一個(gè)你自己的headers對(duì)象,相當(dāng)于 response/request 的頭信息,可以使你查詢到這些頭信息,或者針對(duì)不同的結(jié)果做不同的操作。
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
復(fù)制代碼
Request
通過Request()構(gòu)造函數(shù)可以創(chuàng)建一個(gè)Request對(duì)象,這個(gè)對(duì)象可以作為fetch函數(shù)的第二個(gè)參數(shù)。
Response
在fetch()處理完promises之后返回一個(gè)Response實(shí)例,也可以手動(dòng)創(chuàng)建一個(gè)Response實(shí)例。
由于fetch是一個(gè)非常底層的API,所以我們無法進(jìn)一步的探究它的底層,但是我們可以借助它的polyfill探究它的基本原理,并找出其中的坑點(diǎn)。
由代碼可見,polyfill主要對(duì)Fetch API提供的四大對(duì)象進(jìn)行了封裝:
代碼非常清晰:
構(gòu)造一個(gè)Promise對(duì)象并返回
創(chuàng)建一個(gè)Request對(duì)象
創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
取出Request對(duì)象中的請(qǐng)求url,請(qǐng)求方發(fā),open一個(gè)xhr請(qǐng)求,并將Request對(duì)象中存儲(chǔ)的headers取出賦給xhr
xhr onload后取出response的status、headers、body封裝Response對(duì)象,調(diào)用resolve。
可以發(fā)現(xiàn),調(diào)用reject有三種可能:
1.請(qǐng)求超時(shí)
2.請(qǐng)求失敗
注意:當(dāng)和服務(wù)器建立簡介,并收到服務(wù)器的異常狀態(tài)碼如404、500等并不能觸發(fā)onerror。當(dāng)網(wǎng)絡(luò)故障時(shí)或請(qǐng)求被阻止時(shí),才會(huì)標(biāo)記為 reject,如跨域、url不存在,網(wǎng)絡(luò)異常等會(huì)觸發(fā)onerror。
所以使用fetch當(dāng)接收到異常狀態(tài)碼都是會(huì)進(jìn)入then而不是catch。這些錯(cuò)誤請(qǐng)求往往要手動(dòng)處理。
3.手動(dòng)終止
可以在request參數(shù)中傳入signal對(duì)象,并對(duì)signal對(duì)象添加abort事件監(jiān)聽,當(dāng)xhr.readyState變?yōu)?(響應(yīng)內(nèi)容解析完成)后將signal對(duì)象的abort事件監(jiān)聽移除掉。
這表示,在一個(gè)fetch請(qǐng)求結(jié)束之前可以調(diào)用signal.abort將其終止。在瀏覽器中可以使用AbortController()構(gòu)造函數(shù)創(chuàng)建一個(gè)控制器,然后使用AbortController.signal屬性
這是一個(gè)實(shí)驗(yàn)中的功能,此功能某些瀏覽器尚在開發(fā)中
在header對(duì)象中維護(hù)了一個(gè)map對(duì)象,構(gòu)造函數(shù)中可以傳入Header對(duì)象、數(shù)組、普通對(duì)象類型的header,并將所有的值維護(hù)到map中。
之前在fetch函數(shù)中看到調(diào)用了header的forEach方法,下面是它的實(shí)現(xiàn):
可見header的遍歷即其內(nèi)部map的遍歷。
另外Header還提供了append、delete、get、set等方法,都是對(duì)其內(nèi)部的map對(duì)象進(jìn)行操作。
Request對(duì)象接收的兩個(gè)參數(shù)即fetch函數(shù)接收的兩個(gè)參數(shù),第一個(gè)參數(shù)可以直接傳遞url,也可以傳遞一個(gè)構(gòu)造好的request對(duì)象。第二個(gè)參數(shù)即控制不同配置的option對(duì)象。
可以傳入credentials、headers、method、mode、signal、referrer等屬性。
這里注意:
傳入的headers被當(dāng)作Headers構(gòu)造函數(shù)的參數(shù)來構(gòu)造header對(duì)象。
fetch函數(shù)中還有如下的代碼:
if (request.credentials === 'include') {
xhr.withCredentials = true
} else if (request.credentials === 'omit') {
xhr.withCredentials = false
}
復(fù)制代碼
默認(rèn)的credentials類型為same-origin,即可攜帶同源請(qǐng)求的coodkie。
然后我發(fā)現(xiàn)這里polyfill的實(shí)現(xiàn)和MDN-使用Fetch以及很多資料是不一致的:
mdn: 默認(rèn)情況下,fetch 不會(huì)從服務(wù)端發(fā)送或接收任何 cookies
于是我分別實(shí)驗(yàn)了下使用polyfill和使用原生fetch攜帶cookie的情況,發(fā)現(xiàn)在不設(shè)置credentials的情況下居然都是默認(rèn)攜帶同源cookie的,這和文檔的說明說不一致的,查閱了許多資料后都是說fetch默認(rèn)不會(huì)攜帶cookie,下面是使用原生fetch在瀏覽器進(jìn)行請(qǐng)求的情況:
然后我發(fā)現(xiàn)在MDN-Fetch-Request已經(jīng)指出新版瀏覽器credentials默認(rèn)值已更改為same-origin,舊版依然是omit。
確實(shí)MDN-使用Fetch這里的文檔更新的有些不及時(shí),誤人子弟了...
Response對(duì)象是fetch調(diào)用成功后的返回值:
回顧下fetch中對(duì)Response`的操作:
xhr.() {
var options = {
status: xhr.status,
statusText: xhr.statusText,
headers: parseHeaders(xhr.getAllResponseHeaders() || '')
}
options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')
var body = 'response' in xhr ? xhr.response : xhr.responseText
resolve(new Response(body, options))
}
復(fù)制代碼
Response構(gòu)造函數(shù):
可見在構(gòu)造函數(shù)中主要對(duì)options中的status、statusText、headers、url等分別做了處理并掛載到Response對(duì)象上。
構(gòu)造函數(shù)里面并沒有對(duì)responseText的明確處理,最后交給了_initBody函數(shù)處理,而Response并沒有主動(dòng)聲明_initBody屬性,代碼最后使用Response調(diào)用了Body函數(shù),實(shí)際上_initBody函數(shù)是通過Body函數(shù)掛載到Response身上的,先來看看_initBody函數(shù):
可見,_initBody函數(shù)根據(jù)xhr.response的類型(Blob、FormData、String...),為不同的參數(shù)進(jìn)行賦值,這些參數(shù)在Body方法中得到不同的應(yīng)用,下面具體看看Body函數(shù)還做了哪些其他的操作:
Body函數(shù)中還為Response對(duì)象掛載了四個(gè)函數(shù),text、json、blob、formData,這些函數(shù)中的操作就是將_initBody中得到的不同類型的返回值返回。
這也說明了,在fetch執(zhí)行完畢后,不能直接在response中獲取到返回值而必須調(diào)用text()、json()等函數(shù)才能獲取到返回值。
這里還有一點(diǎn)需要說明:幾個(gè)函數(shù)中都有類似下面的邏輯:
var rejected = consumed(this)
if (rejected) {
return rejected
}
復(fù)制代碼
consumed函數(shù):
function consumed(body) {
if (body.bodyUsed) {
return Promise.reject(new TypeError('Already read'))
}
body.bodyUsed = true
}
復(fù)制代碼
每次調(diào)用text()、json()等函數(shù)后會(huì)將bodyUsed變量變?yōu)閠rue,用來標(biāo)識(shí)返回值已經(jīng)讀取過了,下一次再讀取直接拋出TypeError('Already read')。這也遵循了原生fetch的原則:
因?yàn)镽esponses對(duì)象被設(shè)置為了 stream 的方式,所以它們只能被讀取一次
VUE的文檔中對(duì)fetch有下面的描述:
使用fetch還有很多別的注意事項(xiàng),這也是為什么大家現(xiàn)階段還是更喜歡axios 多一些。當(dāng)然這個(gè)事情在未來可能會(huì)發(fā)生改變。
由于fetch是一個(gè)非常底層的API,它并沒有被進(jìn)行很多封裝,還有許多問題需要處理:
不能直接傳遞JavaScript對(duì)象作為參數(shù)
需要自己判斷返回值類型,并執(zhí)行響應(yīng)獲取返回值的方法
獲取返回值方法只能調(diào)用一次,不能多次調(diào)用
無法正常的捕獲異常
老版瀏覽器不會(huì)默認(rèn)攜帶cookie
不支持jsonp
支持傳入不同的參數(shù)類型:
function stringify(url, data) {
var dataString = url.indexOf('?') == -1 ? '?' : '&';
for (var key in data) {
dataString += key + '=' + data[key] + '&';
};
return dataString;
}
if (request.formData) {
request.body = request.data;
} else if (/^get$/i.test(request.method)) {
request.url = `${request.url}${stringify(request.url, request.data)}`;
} else if (request.form) {
request.headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
request.body = stringify(request.data);
} else {
request.headers.set('Content-Type', 'application/json;charset=UTF-8');
request.body = JSON.stringify(request.data);
}
復(fù)制代碼
fetch在新版瀏覽器已經(jīng)開始默認(rèn)攜帶同源cookie,但在老版瀏覽器中不會(huì)默認(rèn)攜帶,我們需要對(duì)他進(jìn)行統(tǒng)一設(shè)置:
request.credentials = 'same-origin'; // 同源攜帶
request.credentials = 'include'; // 可跨域攜帶
復(fù)制代碼
當(dāng)接收到一個(gè)代表錯(cuò)誤的 HTTP 狀態(tài)碼時(shí),從 fetch()返回的 Promise 不會(huì)被標(biāo)記為 reject, 即使該 HTTP 響應(yīng)的狀態(tài)碼是 404 或 500。相反,它會(huì)將 Promise 狀態(tài)標(biāo)記為 resolve (但是會(huì)將 resolve 的返回值的 ok 屬性設(shè)置為 false ),僅當(dāng)網(wǎng)絡(luò)故障時(shí)或請(qǐng)求被阻止時(shí),才會(huì)標(biāo)記為 reject。
因此我們要對(duì)fetch的異常進(jìn)行統(tǒng)一處理
.then(response => {
if (response.ok) {
return Promise.resolve(response);
}else{
const error = new Error(`請(qǐng)求失敗! 狀態(tài)碼: ${response.status}, 失敗信息: ${response.statusText}`);
error.response = response;
return Promise.reject(error);
}
});
復(fù)制代碼
對(duì)不同的返回值類型調(diào)用不同的函數(shù)接收,這里必須提前判斷好類型,不能多次調(diào)用獲取返回值的方法:
.then(response => {
let contentType = response.headers.get('content-type');
if (contentType.includes('application/json')) {
return response.json();
} else {
return response.text();
}
});
復(fù)制代碼
fetch本身沒有提供對(duì)jsonp的支持,jsonp本身也不屬于一種非常好的解決跨域的方式,推薦使用cors或者nginx解決跨域,具體請(qǐng)看下面的章節(jié)。
fetch封裝好了,可以愉快的使用了。
嗯,axios真好用...
談到網(wǎng)絡(luò)請(qǐng)求,就不得不提跨域。
瀏覽器的同源策略限制了從同一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的重要安全機(jī)制。通常不允許不同源間的讀操作。
跨域條件:協(xié)議,域名,端口,有一個(gè)不同就算跨域。
下面是解決跨域的幾種方式:
使用nginx反向代理實(shí)現(xiàn)跨域,參考我這篇文章:前端開發(fā)者必備的nginx知識(shí)
CORS是一個(gè)W3C標(biāo)準(zhǔn),全稱是"跨域資源共享"(Cross-origin resource sharing)。它允許瀏覽器向跨源服務(wù)器,發(fā)出XMLHttpRequest請(qǐng)求。
服務(wù)端設(shè)置Access-Control-Allow-Origin就可以開啟CORS。 該屬性表示哪些域名可以訪問資源,如果設(shè)置通配符則表示所有網(wǎng)站都可以訪問資源。
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");
next();
});
復(fù)制代碼
script標(biāo)簽的src屬性中的鏈接可以訪問跨域的js腳本,利用這個(gè)特性,服務(wù)端不再返回JSON格式的數(shù)據(jù),而是返回一段調(diào)用某個(gè)函數(shù)的js代碼,在src中進(jìn)行了調(diào)用,這樣實(shí)現(xiàn)了跨域。
jquery對(duì)jsonp的支持:
$.ajax({
type : "get",
url : "http://xxxx"
dataType: "jsonp",
jsonp:"callback",
jsonpCallback: "doo",
success : function(data) {
console.log(data);
}
});
fetch、axios等并沒有直接提供對(duì)jsonp的支持,如果需要使用這種方式,我們可以嘗試進(jìn)行手動(dòng)封裝:
(function (window,document) {
"use strict";
var jsonp = function (url,data,callback) {
// 1.將傳入的data數(shù)據(jù)轉(zhuǎn)化為url字符串形式
// {id:1,name:'jack'} => id=1&name=jack
var dataString = url.indexof('?') == -1? '?': '&';
for(var key in data){
dataString += key + '=' + data[key] + '&';
};
// 2 處理url中的回調(diào)函數(shù)
// cbFuncName回調(diào)函數(shù)的名字 :my_json_cb_名字的前綴 + 隨機(jī)數(shù)(把小數(shù)點(diǎn)去掉)
var cbFuncName = 'my_json_cb_' + Math.random().toString().replace('.','');
dataString += 'callback=' + cbFuncName;
// 3.創(chuàng)建一個(gè)script標(biāo)簽并插入到頁面中
var scriptEle = document.createElement('script');
scriptEle.src = url + dataString;
// 4.掛載回調(diào)函數(shù)
window[cbFuncName] = function (data) {
callback(data);
// 處理完回調(diào)函數(shù)的數(shù)據(jù)之后,刪除jsonp的script標(biāo)簽
document.body.removeChild(scriptEle);
}
document.body.appendChild(scriptEle);
}
window.$jsonp = jsonp;
})(window,document)
postMessage()方法允許來自不同源的腳本采用異步方式進(jìn)行有限的通信,可以實(shí)現(xiàn)跨文本檔、多窗口、跨域消息傳遞。
//捕獲iframe
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;
//發(fā)送消息
setInterval(function(){
var message = 'Hello! The time is: ' + (new Date().getTime());
console.log('blog.local: sending message: ' + message);
//send the message and target URI
iframe.postMessage(message,domain);
},6000);
//響應(yīng)事件
window.addEventListener('message',function(event) {
if(event.origin !== 'http://davidwalsh.name') return;
console.log('message received: ' + event.data,event);
event.source.postMessage('holla back youngin!',event.origin);
},false);
postMessage跨域適用于以下場景:同瀏覽器多窗口間跨域通信、iframe間跨域通信。
WebSocket 是一種雙向通信協(xié)議,在建立連接之后,WebSocket的 server與 client都能主動(dòng)向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)而不受同源策略的限制。
function WebSocketTest(){
if ("WebSocket" in window){
alert("您的瀏覽器支持 WebSocket!");
// 打開一個(gè) web socket
var ws = new WebSocket("ws://localhost:3000/abcd");
ws.function(){
// Web Socket 已連接上,使用 send() 方法發(fā)送數(shù)據(jù)
ws.send("發(fā)送數(shù)據(jù)");
alert("數(shù)據(jù)發(fā)送中...");
};
ws.(evt) {
var received_msg = evt.data;
alert("數(shù)據(jù)已接收...");
};
ws.
// 關(guān)閉 websocket
alert("連接已關(guān)閉...");
};
} else{
// 瀏覽器不支持 WebSocket
alert("您的瀏覽器不支持 WebSocket!");
}
}
以上是“前端進(jìn)行網(wǎng)絡(luò)請(qǐng)求的方式有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。