摘要:的案例下面我們來寫第一個獲取后端數(shù)據(jù)的例子通過獲取百度的錯誤提示頁面返回一個對象是一個對象是最終的結(jié)果請求請求初步完成了,這個時候就要來認(rèn)識一下請求如何處理了。
JavaScript fetch接口
如果看網(wǎng)上的fetch教程,會首先對比XMLHttpRequest和fetch的優(yōu)劣,然后引出一堆看了很快會忘記的內(nèi)容(本人記性不好)。因此,我寫一篇關(guān)于fetch的文章,為了自己看著方便,畢竟工作中用到的也就是一些很基礎(chǔ)的點而已。
fetch,說白了,就是XMLHttpRequest的一種替代方案。如果有人問你,除了Ajax獲取后臺數(shù)據(jù)之外,還有沒有其他的替代方案?
這是你就可以回答,除了XMLHttpRequest對象來獲取后臺的數(shù)據(jù)之外,還可以使用一種更優(yōu)的解決方案fetch。
fetch的案例 下面我們來寫第一個fetch獲取后端數(shù)據(jù)的例子:// 通過fetch獲取百度的錯誤提示頁面 fetch("https://www.baidu.com/search/error.html") // 返回一個Promise對象 .then((res)=>{ return res.text() // res.text()是一個Promise對象 }) .then((res)=>{ console.log(res) // res是最終的結(jié)果 })GET請求 GET請求初步
完成了helloworld,這個時候就要來認(rèn)識一下GET請求如何處理了。
上面的helloworld中這是使用了第一個參數(shù),其實fetch還可以提供第二個參數(shù),就是用來傳遞一些初始化的信息。
這里如果要特別指明是GET請求,就要寫成下面的形式:
// 通過fetch獲取百度的錯誤提示頁面 fetch("https://www.baidu.com/search/error.html", { method: "GET" }) .then((res)=>{ return res.text() }) .then((res)=>{ console.log(res) })GET請求的參數(shù)傳遞
GET請求中如果需要傳遞參數(shù)怎么辦?這個時候,只能把參數(shù)寫在URL上來進行傳遞了。
// 通過fetch獲取百度的錯誤提示頁面 fetch("https://www.baidu.com/search/error.html?a=1&b=2", { // 在URL中寫上傳遞的參數(shù) method: "GET" }) .then((res)=>{ return res.text() }) .then((res)=>{ console.log(res) })POST請求
與GET請求類似,POST請求的指定也是在fetch的第二個參數(shù)中:
// 通過fetch獲取百度的錯誤提示頁面 fetch("https://www.baidu.com/search/error.html", { method: "POST" // 指定是POST請求 }) .then((res)=>{ return res.text() }) .then((res)=>{ console.log(res) })POST請求參數(shù)的傳遞
眾所周知,POST請求的參數(shù),一定不能放在URL中,這樣做的目的是防止信息泄露。
// 通過fetch獲取百度的錯誤提示頁面 fetch("https://www.baidu.com/search/error.html", { method: "POST", body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 這里是請求對象 }) .then((res)=>{ return res.text() }) .then((res)=>{ console.log(res) })設(shè)置請求的頭信息
在POST提交的過程中,一般是表單提交,可是,經(jīng)過查詢,發(fā)現(xiàn)默認(rèn)的提交方式是:Content-Type:text/plain;charset=UTF-8,這個顯然是不合理的。下面咱們學(xué)習(xí)一下,指定頭信息:
// 通過fetch獲取百度的錯誤提示頁面 fetch("https://www.baidu.com/search/error.html", { method: "POST", headers: new Headers({ "Content-Type": "application/x-www-form-urlencoded" // 指定提交方式為表單提交 }), body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() }) .then((res)=>{ return res.text() }) .then((res)=>{ console.log(res) })
這個時候,在谷歌瀏覽器的Network中查詢,會發(fā)現(xiàn),請求方式已經(jīng)變成了content-type:application/x-www-form-urlencoded。
通過接口得到JSON數(shù)據(jù)上面所有的例子中都是返回一個文本,那么除了文本,有沒有其他的數(shù)據(jù)類型呢?肯定是有的,具體查詢地址:Body的類型
由于最常用的是JSON數(shù)據(jù),那么下面就簡單演示一下獲取JSON數(shù)據(jù)的方式:
fetch("https://www.baidu.com/rec?platform=wise&ms=1&rset=rcmd&word=123&qid=11327900426705455986&rq=123&from=844b&baiduid=A1D0B88941B30028C375C79CE5AC2E5E%3AFG%3D1&tn=&clientWidth=375&t=1506826017369&r=8255", { // 在URL中寫上傳遞的參數(shù) method: "GET", headers: new Headers({ "Accept": "application/json" // 通過頭指定,獲取的數(shù)據(jù)類型是JSON }) }) .then((res)=>{ return res.json() // 返回一個Promise,可以解析成JSON }) .then((res)=>{ console.log(res) // 獲取JSON數(shù)據(jù) })強制帶Cookie
默認(rèn)情況下, fetch 不會從服務(wù)端發(fā)送或接收任何 cookies, 如果站點依賴于維護一個用戶會話,則導(dǎo)致未經(jīng)認(rèn)證的請求(要發(fā)送 cookies,必須發(fā)送憑據(jù)頭).
// 通過fetch獲取百度的錯誤提示頁面 fetch("https://www.baidu.com/search/error.html", { method: "GET", credentials: "include" // 強制加入憑據(jù)頭 }) .then((res)=>{ return res.text() }) .then((res)=>{ console.log(res) })
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/113824.html
摘要:的案例下面我們來寫第一個獲取后端數(shù)據(jù)的例子通過獲取百度的錯誤提示頁面返回一個對象是一個對象是最終的結(jié)果請求請求初步完成了,這個時候就要來認(rèn)識一下請求如何處理了。 JavaScript fetch接口 如果看網(wǎng)上的fetch教程,會首先對比XMLHttpRequest和fetch的優(yōu)劣,然后引出一堆看了很快會忘記的內(nèi)容(本人記性不好)。因此,我寫一篇關(guān)于fetch的文章,為了自己看著方便...
摘要:的案例下面我們來寫第一個獲取后端數(shù)據(jù)的例子通過獲取百度的錯誤提示頁面返回一個對象是一個對象是最終的結(jié)果請求請求初步完成了,這個時候就要來認(rèn)識一下請求如何處理了。 JavaScript fetch接口 如果看網(wǎng)上的fetch教程,會首先對比XMLHttpRequest和fetch的優(yōu)劣,然后引出一堆看了很快會忘記的內(nèi)容(本人記性不好)。因此,我寫一篇關(guān)于fetch的文章,為了自己看著方便...
摘要:測試調(diào)用斷言的執(zhí)行后返回斷言被調(diào)用斷言被調(diào)用了一次斷言傳入的參數(shù)為所創(chuàng)建的函數(shù)還可以設(shè)置返回值,定義內(nèi)部實現(xiàn)或返回對象。 在本篇教程中,我們會介紹 Jest 中的三個與 Mock 函數(shù)相關(guān)的API,分別是jest.fn()、jest.spyOn()、jest.mock()。使用它們創(chuàng)建Mock函數(shù)能夠幫助我們更好的測試項目中一些邏輯較復(fù)雜的代碼,例如測試函數(shù)的嵌套調(diào)用,回調(diào)函數(shù)的調(diào)用等...
摘要:簽訂協(xié)議的兩方分別是異步接口和。在異步函數(shù)中,使用異常捕獲的方案,代替了的異常捕獲的方案。需要注意的是,在異步函數(shù)中使異步函數(shù)用時要使用,不然異步函會被同步執(zhí)行。 同步與異步 通常,代碼是由上往下依次執(zhí)行的。如果有多個任務(wù),就必需排隊,前一個任務(wù)完成,后一個任務(wù)才會執(zhí)行。這種執(zhí)行模式稱之為: 同步(synchronous) 。新手容易把計算機用語中的同步,和日常用語中的同步弄混淆。如,...
摘要:今天這篇文章,我們會介紹幾種常見的方法和其中存在的問題,并提出如何基于請求攔截,快速解決跨域和代理問題的方案。因為沒有修改該請求,只是延遲發(fā)送,這樣就保持了原請求與業(yè)務(wù)服務(wù)器之間的所有鑒權(quán)等相關(guān)信息,由此解決了跨域訪問無法攜帶的問題。 近幾年,隨著 Web 開發(fā)逐漸成熟,前后端分離的架構(gòu)設(shè)計越來越被眾多開發(fā)者認(rèn)可,使得前端和后端可以專注各自的職能,降低溝通成本,提高開發(fā)效率。 在前后端...
閱讀 2158·2023-04-25 20:45
閱讀 1068·2021-09-22 15:13
閱讀 3641·2021-09-04 16:48
閱讀 2580·2019-08-30 15:53
閱讀 928·2019-08-30 15:44
閱讀 936·2019-08-30 15:43
閱讀 1002·2019-08-29 16:33
閱讀 3432·2019-08-29 13:08