JavaScript fetch簡單封裝

js 請求庫簡單封裝

原文地址

個人博客 https://www.charmcode.cn/article/2020-06-22_js_fetch

前言

以前一直用JQuery的 ajax 請求，感覺哪玩意真不好用，后面發現有fetch這個http請求庫，於是自己嘗試封裝看看。

• 參考https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

需要注意的

fetch 規范與 jQuery.ajax() 主要有三種方式的不同：

當接收到一個代表錯誤的 HTTP 狀態碼時，從 fetch() 返回的 Promise 不會被標記為 reject， 即使響應的 HTTP 狀態碼是 404 或 500。相反，它會將 Promise 狀態標記為 resolve （但是會將 resolve 的返回值的 ok 屬性設置為 false ），僅當網絡故障時或請求被阻止時，才會標記為 reject。
fetch() 不會接受跨域 cookies；你也不能使用 fetch() 建立起跨域會話。其他網站的 Set-Cookie 頭部字段將會被無視。
fetch 不會發送 cookies。除非你使用了credentials 的初始化選項。（自 2017 年 8 月 25 日以后，默認的 credentials 政策變更為 same-origin。Firefox 也在 61.0b13 版本中進行了修改）

瀏覽器兼容性

封裝代碼

可以先建一個 requests.js (Tip: Python requests )

// 請求前綴url
const baseUrl = "https://www.charmcode.cn";

/*
* path: 請求路徑
* method: 請求方法 默認get
* data: 請求參數 默認為空
* */
function requests(path, method = "GET", data = {}) {

    method = method.toUpperCase();

    // 默認請求頭
    let requestHeader = {
        headers: {
            'content-type': 'application/json'
        },
        method
    };

    // 如果是get請求
    if (method === "GET") {
        // 轉換拼接get參數
        let esc = encodeURIComponent;
        let queryParams = Object.keys(data)
            .map(k => `${esc(k)}=${esc(data[k])}`)
            .join('&');
        if(queryParams) path += `?${queryParams}`;

    } else {
        // 其他請求 放入body里面
        requestHeader.body = JSON.stringify(data)
    }

    // 可以在這封裝一個回調函數，請求攔截


    // 發送請求並返回 promise 對象 注意 fetch不會攔截其他異常請求️
    return fetch(`${baseUrl}${path}`, requestHeader).then(
        // 可在這里封裝 響應攔截函數
        response => response.json()
    )
}

調用示例

這里是演示的單頁面使用方式。

// 一般單頁面自己引入
<script src="./js/request.js"></script>

// requests 返回的是一個promise對象 用then函數接收
requests("/api/v1/goods", "get", {goodsId: 123}).then((data) => {
    console.log(data)
});