fetch 添加攔截器攔截器

使用過axios的便會知道axios 有axios.interceptors.request.use請求攔截器與service.interceptors.response.use響應攔截器，可以請求前和，then，catch前統一處理響應信息或者response

expand_fetch.jsconst req_interceptors = [] //請求攔截方法存放 const res_interceptors = [] //響應攔截方法存放function expand_fetch( url, option = { } ){ if( !option.method ){option.method = 'GET' }//多個請求攔截器依次更改option req_interceptors.forEach( fn => option = fn(option) )return new Promise((resolve,reject)=>{//使用原生fetchfetch(url,option).then(( res )=>{‘//多個響應攔截器依次更改res res_interceptors.forEach( fn => res = fn(res) )resolve(res)}).catch((error)=>{reject(error)})}) }//掛載添加和刪除攔截器的方法 expand_fetch.interceptors = {request:{ use : (fn)=>{req_interceptors.push(fn)return fn},eject:(data)=>{if(req_interceptors.indexOf(data) !== -1){req_interceptors.splice(req_interceptors.indexOf(data),1)}}},response:{ use : (fn)=>{res_interceptors.push(fn)return fn}},eject:(data)=>{if(res_interceptors.indexOf(data) !== -1){res_interceptors.splice(res_interceptors.indexOf(data),1)}} }export default expand_fetch

使用

import Fetch from './expand_fetch.js'//為post數據轉為 json 發送 const c_req = Fetch.interceptors.request.use((option)=>{if(option.method === "POST"){option.body = JSON.stringify(option.body)}return option })//直接獲取到返回內容的數據 const c_res = Fetch.interceptors.response.use((res)=>{if(res.code === 200 && res.data ){return res.data}return res })//清除攔截器 Fetch.interceptors.request.eject(c_req) Fetch.interceptors.response.eject(c_res)

總結

以上是生活随笔為你收集整理的为fetch添加拦截器功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。