FETCH中的基礎語法以及封裝自己的Ajax庫

2021-10-24 12:25:29 字數 2264 閱讀 2718

注意:fetch不是ajax,它是為了代替ajax,是js中內建的api,基於fetch可以實現客戶端和服務端的資訊通訊

注意:get/head等請求不能設定bdoy,不管伺服器返回的狀態為多少,fetch都不認為是失敗(4或5開頭的),都執行的事then中的方法(需要自己進行異常丟擲處理)

### 實際案例
fetch('/url').then(result =>  = result;

if(/^(4|5)\d$/.test(status))

return result.json()

}).then(result => ).catch(result => )

正確時:錯誤時:

js**

(function anonymous(window),

datatype:'json',

data:null,//post系列請求基於請求主體傳遞給伺服器的內容

params:null, //get系列請求基於問號傳遞給伺服器的內容

cache:true

};//基於promise設計模式管理ajax請求

let ajaxpromise = function ajaxpromise(options = {}) = options;

//把傳遞的引數進一步處理

if(/^(get|delete|head|options)$/i.test(method))$`

}if(cache === false) = $`

}//get系列請求主體就是什麼都不放

data = null;

}else

}//基於promise傳送ajax

return new promise((resolve,reject) => $`);

//如果headers存在,需要設定請求頭

if(headers !== null && typeof headers === 'object')

xhr.setrequestheader(attr,val);}}

}xhr.onreadystatechange = () => /.test(xhr.status))

//獲得錯誤資訊

reject(xhr.statustext,xhr)}}

xhr.send(data);

})};

//把預設配置暴露出去,後期使用者在使用的時候可以自己設定一些基礎的預設值(傳送ajax請求的時候按照使用者配置的資訊進行處理)

ajaxpromise.de****ts = _default;

//把物件轉換成urlencoded格式的字串

ajaxpromise.formatdata = function formatdata(obj)=$&`}}

return str.substring(0,str.length - 1);

}//判斷是否為?號

fetch在vue中的封裝使用

使用fetch 是乙個現代的概念,約等同於xmlhttprequest,其最大的兩個特性 可以在service workers使用 基於promise,天然支援proomise 在vue 專案開發中,我們與介面打交道最多了,如何來優雅的使用請求變得尤為重要了。通常我們通過客戶端向後端傳送http請求...

sass的操作以及語法程式設計基礎

1 4 sass 程式設計基礎 有了前面的 quick start 部門的簡單了解,基本能描述清楚 sass 的用途了,具體的控制 樣式 css 的定義和其他的程式開發操作,就需要對 sass 中提供的各種基礎性的知識有一 個簡單的認知和應用過程。1 4.1.1 變數 variables sass ...

OC基礎語法之封裝繼承多型

封裝 隱藏內部實現,穩定外部介面.封裝就是定義類 定義屬性 定義方法 set方法 提供乙個方法給外界設定成員變數的值,沒有返回值,一定要接收乙個引數,引數型別跟成員變數型別一樣,形參的名稱不能跟成員變數名一樣。get方法 返回物件內部的成員變數,肯定有返回值,返回值與成員變數型別一致,方法名跟成員變...