這篇文章將為大家詳細講解有關(guān)javascript如何實現(xiàn)fetch請求返回的統(tǒng)一攔截，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)渝中免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

攔截器的目的

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

之前的實現(xiàn)

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

常見的一道面試題

vue 雙向綁定的原理

• vue2 基于 defineProperty

• vue3 基于 Proxy

極簡的雙向綁定

  const obj = {};
Object.defineProperty(obj, 'text', {
 get: function() {
  console.log('get val'); 
 },
 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;
})

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

defineProperty

查看 MDN

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

Object.defineProperty(obj, prop, descriptor);

descriptor 屬性與方法包含

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

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

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

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

set()
設置屬性時候會調(diào)用

get()
訪問屬性時候會調(diào)用

回想下我們使用 fetch 的時候都是直接使用，所以 fetch 是 window 或者 global 對象下的一個屬性啊，
每次我們使用 fetch 的時候相當于訪問了 window 或者 global 的屬性，也就是上面的 get 方法

攔截器的實現(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 實現(xiàn)請求攔截
    },...options.headers
   }}).then(checkStatus) 
   // checkStatus 這里可以做返回錯誤處理，實現(xiàn)返回攔截
  .then(response =>response.json())
 }
});

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

關(guān)于“javascript如何實現(xiàn)fetch請求返回的統(tǒng)一攔截”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章名稱：javascript如何實現(xiàn)fetch請求返回的統(tǒng)一攔截-創(chuàng)新互聯(lián)
標題路徑：http://weahome.cn/article/dgosde.html