fetch 如何請求資料

2021-09-04 10:01:42 字數 2324 閱讀 6007

在 傳統ajax 時代,進行 api 等網路請求都是通過xmlhttprequest或者封裝後的框架進行網路請求,然而配置和呼叫方式非常混亂,對於剛入門的新手並不友好。今天我們介紹的fetch提供了乙個更好的替代方法,它不僅提供了一種簡單,合乎邏輯的方式來跨網路非同步獲取資源,而且可以很容易地被其他技術使用,例如 service workers。

本文首發位址為github部落格

使用ajax請求乙個 json 資料一般是這樣:

同樣我們使用fetch請求json資料:

fetch(url).then(response => response.json())//解析為可讀資料

.then(data => console.log(data))//執行結果是 resolve就呼叫then方法

.catch(err => console.log("oh, error", err))//執行結果是 reject就呼叫catch方法

從兩者對比來看,fetch**精簡許多,業務邏輯更清晰明了,使得**易於維護,可讀性更高。

總而言之,fetch 優點主要有:

1. 語法簡潔,更加語義化,業務邏輯更清晰

2. 基於標準 promise 實現,支援 async/await

3. 同構方便,使用isomorphic-fetch

由於 fetch api 是基於 promise 設計,接下來我們簡單介紹下promise工作流程,方便大家更好理解fetch。

fetch方法返回乙個promise物件, 根據 promise api 的特性, fetch可以方便地使用then方法將各個處理邏輯串起來, 使用 promise.resolve() 或 promise.reject() 方法將分別返會肯定結果的promise或否定結果的promise, 從而呼叫下乙個then 或者 catch。一旦then中的語句出現錯誤, 也將跳到catch中。

接下來將介紹如何使用fetch請求本地文字資料,請求本地json資料以及請求網路介面。其實操作相比與ajax,簡單很多!

//html部分

請求本地文字資料

請求本地json資料

請求網路介面

本地有乙個test.txt文件,通過以下**就可以獲取其中的資料,並且顯示在頁面上。

document.getelementbyid('button1').addeventlistener('click',gettext);

function gettext())

.catch(err => console.log(err));

}

本地有個posts.json資料,與請求本地文字不同的是,得到資料後還要用foreach遍歷,最後呈現在頁面上。

document.getelementbyid('button2').addeventlistener('click',getjson);

function getjson()`;

})document.getelementbyid('output').innerhtml = output;

}).catch(err => console.log(err));

}

獲取中的資料,做法與獲取本地json的方法類似,得到資料後,同樣要經過處理

document.getelementbyid('button3').addeventlistener('click',getexternal);

function getexternal()`;

})document.getelementbyid('output').innerhtml = output;

}).catch(err => console.log(err));

}

fetch 如何請求資料

在 傳統ajax 時代,進行 api 等網路請求都是通過xmlhttprequest或者封裝後的框架進行網路請求,然而配置和呼叫方式非常混亂,對於剛入門的新手並不友好。今天我們介紹的fetch提供了乙個更好的替代方法,它不僅提供了一種簡單,合乎邏輯的方式來跨網路非同步獲取資源,而且可以很容易地被其他...

解析Fetch實現請求資料

這篇文章主要介紹了fetch 如何實現請求資料,文中通過示例 介紹的非常詳細,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。一 序言在 傳統ajax 時代,進行 api 等網路請求都是通過xmlhttprequest或者封裝後的框架進行網路請求,...

anxios和fetch資料請求

proto object注意 anxios返回的是promise物件 案例如下 這裡引用了bootstrap html檔案如下 class container class row axios get button div div div 格式如下 axios.get url then res con...