前端業務經常會出現這樣一類問題，當用戶網速過慢或是其他特殊情況下，該頁面的請求還未完成，用戶就已經點擊其他頁面跳出去了。理想狀態下請求也是應該終止掉的，所以我們應該想辦法將請求和頁面卸載關聯在一起。

1 使用AbortController將請求終止。

文檔地址：

AbortController?developer.mozilla.org

代碼：

通過abortController.abort();可以取消正在進行的請求

//創建AbortController對象 const abortController = new AbortController();fetch(host + 'newsSelectContentByType?type=2', {// 這里傳入 signal 進行關聯signal: abortController.signal, }) .then(response => response.json()) .then(res => {// 處理拿到的數據并渲染showData(res);//初始化的loading設為falsesetInitLoading(false); })//這里我們設置三秒后取消請求 setTimeout(()=>{// 這里調用 abort 即可取消請求abortController.abort(); },3000)

瀏覽器控制臺Network設置網絡十秒延遲

設置延遲為10s

請求在3s后就自動結束掉了

同理我們可以使用useRef來創建AbortController對象，同時在組件銷毀時去執行方法，完成請求的取消，但是我們不可能在每一個頁面都去寫這么多代碼，所以這里我們去封裝一個useFetch hook。

新建一個UseFetch.js

同理我們的UseFetch不僅僅可以做這一個需求，我們可以根據我們的業務需要去封裝更多的功能進去，比如說請求的loading以及拼接一些公共參數或是說做一個統一的錯誤處理

//自定義fetchhook 封裝組件卸載自動結束未完成的請求功能和loading功能 import React, { useState, useEffect , useRef } from 'react';const useFetch = (url,args) => {//全局設定AbortControllerconst abortController = useRef();//loadingconst [loading,setLoading] = useState(false);//結果const [result,setResult] = useState();//開啟請求的方法const beginFetch = ()=>{abortController.current = new AbortController();//開啟loadingsetLoading(true);//拼接參數let argsStr = '';if(args!=''){for(let key in args) {argsStr += key + '=' + args[key] + '&';}argsStr = '?' + argsStr.substr(0, argsStr.length-1);}//請求fetch(url+argsStr, {// 這里傳入 signal 進行關聯signal: abortController.current.signal,}).then(response => response.json()).then(response => setResult(response)).finally(() => setLoading(false));//無論請求成功還是失敗都強制結束loading}//組件卸載useEffect(()=>{//組件清除時終止請求return () => {abortController.current.abort()}},[])return{ result,loading,beginFetch } }export default useFetch;

使用useFetch

//將之前的頁面數據請求根據useFetch做修改//result 拿到的數據 loading頁面是否展示loading beiginFetch開始進行請求 const {result,loading,beginFetch} = useFetch(host + 'newsSelectContentByType',{type:2} );//點擊加載更多 直接通過beginFetch()方法去獲取數據 const onLoadMore = () => {//設一個loading動畫 先渲染空數據setListData(listData.concat([...new Array(3)].map(() => ({ loading: true, name: {} ,img:[,,,]}))))//因為這里拿數據很快 所以做一個暫停的動畫展示beginFetch(); };//監控result變化 當result發生變化重寫處理數據并渲染到頁面上 useEffect(()=>{//處理數據并渲染showData(result); },result)

該useFetch主要封裝了loading功能和自動結束請求功能，在路由發生切換，Tab 發生切換等場景下，被卸載掉的組件發出的請求會被終止掉，同時在請求開始和結束的情況下會自動判定loading的狀態。

總結

以上是生活随笔為你收集整理的设置公共请求参数_封装一个useFetch实现页面销毁取消请求的全部內容，希望文章能夠幫你解決所遇到的問題。

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