快捷導(dǎo)航

javascript實(shí)現(xiàn)fetch請(qǐng)求返回的統(tǒng)一攔截

更新時(shí)間：2019年12月22日 09:29:14 作者：現(xiàn)在是冬天

這篇文章主要介紹了javascript實(shí)現(xiàn)fetch請(qǐng)求返回的統(tǒng)一攔截,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

攔截器的目的

攔截器（interceptors）一般用于發(fā)起 http 請(qǐng)求之前或之后對(duì)請(qǐng)求進(jìn)行統(tǒng)一的處理，
如 token 實(shí)現(xiàn)的登錄鑒權(quán)（每個(gè)請(qǐng)求帶上 token），統(tǒng)一處理 404 響應(yīng)等等。

之前的實(shí)現(xiàn)

區(qū)別于 axios，fetch 沒(méi)有搜到請(qǐng)求返回?cái)r截器相關(guān) api,那之前是怎么實(shí)現(xiàn)統(tǒng)一攔截的呢，
參照 antd-pro，寫(xiě)一個(gè)統(tǒng)一的請(qǐng)求方法，所有的請(qǐng)求都調(diào)用這個(gè)方法，從而實(shí)現(xiàn)請(qǐng)求與返回的攔截。
這樣我們每次都要去引入這個(gè)方法使用，那么有沒(méi)有更好實(shí)現(xiàn)呢？

常見(jiàn)的一道面試題

vue 雙向綁定的原理

vue2 基于 defineProperty
vue3 基于 Proxy

極簡(jiǎn)的雙向綁定

  const obj = {};
Object.defineProperty(obj, 'text', {
 get: function() {
  console.log('get val');&emsp;
 },
 set: function(newVal) {
  console.log('set val:' + newVal);
  document.getElementById('input').value = newVal;
  document.getElementById('span').innerHTML = newVal;
 }
});

const input = document.getElementById('input');
input.addEventListener('keyup', function(e){
 obj.text = e.target.value;
})

其中我們可以看到運(yùn)用了看數(shù)據(jù)劫持。

defineProperty

查看 MDN

我們可以發(fā)現(xiàn) defineProperty 的使用方法

Object.defineProperty(obj, prop, descriptor);

descriptor 屬性與方法包含

value
屬性的值(不用多說(shuō)了)

configurable: true,
總開(kāi)關(guān)，一旦為 false，就不能再設(shè)置他的（value，writable，configurable）

enumerable: true,
是否能在 for...in 循環(huán)中遍歷出來(lái)或在 Object.keys 中列舉出來(lái)。

writable: true,
如果為 false，屬性的值就不能被重寫(xiě),只能為只讀了

set()
設(shè)置屬性時(shí)候會(huì)調(diào)用

get()
訪問(wèn)屬性時(shí)候會(huì)調(diào)用

回想下我們使用 fetch 的時(shí)候都是直接使用，所以 fetch 是 window 或者 global 對(duì)象下的一個(gè)屬性啊，
每次我們使用 fetch 的時(shí)候相當(dāng)于訪問(wèn)了 window 或者 global 的屬性，也就是上面的 get 方法

攔截器的實(shí)現(xiàn)

const originFetch = fetch;
Object.defineProperty(window, "fetch", {
 configurable: true,
 enumerable: true,
 // writable: true,
 get() {
  return (url,options) => {
   return originFetch(url,{...options,...{
    headers: {
     'Content-Type': 'application/json;charset=UTF-8',
     Accept: 'application/json',
     token:localStorage.getItem('token') 
     //這里統(tǒng)一加token 實(shí)現(xiàn)請(qǐng)求攔截
    },...options.headers
   }}).then(checkStatus) 
   // checkStatus 這里可以做返回錯(cuò)誤處理，實(shí)現(xiàn)返回?cái)r截
  .then(response =>response.json())
 }
});

只要將上述代碼貼到程序入口文件即可

擴(kuò)展

此文是基于 defineProperty , Proxy 同樣可以實(shí)現(xiàn)。

另外在小程序里面 request 方法是掛在 wx 下面，同樣是可以實(shí)現(xiàn)，

具體實(shí)現(xiàn) wx.request

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: