axios封裝(包含取消請求)

import axios, { AxiosRequestConfig, AxiosResponse, AxiosError, Canceler } from 'axios';
import qs from 'qs';

interface requestMap {
  [x: string]: Canceler;
}

// 存放請求實例
let requestMap: requestMap[] = [];

/**
 * 創(chuàng)建xhr實例
 * 路徑前綴
 * 超時失敗時間
 */
const service = axios.create({
  timeout: 3000,
  baseURL: process.env.API_URL,
  withCredentials: true
});

/**
 * @desc 設置服務請求攔截器
 * 定義token請求設置
 */
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 請求頭添加權限驗證
    config.headers.authorization = localStorage.getItem('auth') || '';
    // post請求時轉(zhuǎn)為formdata格式參數(shù)
    if (config.method === 'post') {
      config.data = qs.stringify(config.data);
    }
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

/**
 * @desc 設置服務響應攔截器
 * 截取返回狀態(tài) 統(tǒng)一定義成功失敗
 */
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const data = response.data;
    const code = data.code | 0;
    if (code !== 200) {
      // todo 非正常結(jié)果
      return data;
    } else {
      // todo 正常結(jié)果
      return data;
    }
  },
  (error: AxiosError) => {
    window?.console.log(error.message);
  }
);

/**
 * @desc 取消進行中的請求
 * @param {string} url 請求標記(此處以請求的url為例) 傳遞字符串`all`代表取消進行中的所有請求
 * @param {requestMap[]} requestMap 現(xiàn)存的所有的請求中實例
 * @returns
 */
export function stopRepeatRequest(url: string, requestMap: requestMap[]) {
  return new Promise(res => {
    requestMap.map((ele: requestMap, index: number) => {
      const key = Object.keys(ele)[0];
      if (url && url === key) {
        // 根據(jù)url進行定向取消請求
        ele[url](`取消了 ${url} 請求`);
        delete requestMap[index];
      } else if (url === 'all') {
        // 取消全部請求
        ele[key](`取消了 ${key} 請求`);
        delete requestMap[index];
      }
    });
    res();
  });
}

/**
 * @desc 刪除已完成的請求標記
 * @param {string} url 請求標記(此處以請求的url為例)
 * @param {requestMap[]} requestMap 所有的請求實例
 */
export function deleteCompleteRequest(url: string, requestMap: requestMap[]) {
  requestMap.map((ele: requestMap, index: number) => {
    const key = Object.keys(ele)[0];
    if (url && url === key) {
      delete requestMap[index];
    } else if (url === 'all') {
      delete requestMap[index];
    }
  });
}

/**
 * @desc post請求方法的封裝
 * @param {string} url 請求鏈接
 * @param {*} data 傳參
 * @returns
 */
export async function POST(url: string, data: any) {
  await stopRepeatRequest(url, requestMap);
  const result = await service.post(url, data, {
    cancelToken: new axios.CancelToken(c => {
      requestMap.push({ [url]: c });
      requestMap = requestMap.filter(v => v);
    })
  });
  result && deleteCompleteRequest(url, requestMap);
  return result;
}

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末赃承,一起剝皮案震驚了整個濱河市劳秋,隨后出現(xiàn)的幾起案子震放,更是在濱河造成了極大的恐慌,老刑警劉巖织鲸,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡锦秒,警方通過查閱死者的電腦和手機畦粮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門散址,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宣赔,你說我怎么就攤上這事预麸。” “怎么了儒将?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵吏祸,是天一觀的道長。 經(jīng)常有香客問我钩蚊,道長贡翘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任砰逻,我火速辦了婚禮鸣驱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蝠咆。我一直安慰自己踊东,他們只是感情好,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著递胧,像睡著了一般碑韵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缎脾,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天祝闻,我揣著相機與錄音,去河邊找鬼遗菠。 笑死联喘,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的辙纬。 我是一名探鬼主播豁遭,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼贺拣!你這毒婦竟也來了蓖谢?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤譬涡,失蹤者是張志新(化名)和其女友劉穎闪幽,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涡匀,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡盯腌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了陨瘩。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片腕够。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖舌劳,靈堂內(nèi)的尸體忽然破棺而出帚湘,到底是詐尸還是另有隱情,我是刑警寧澤蒿囤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布客们,位于F島的核電站,受9級特大地震影響材诽,放射性物質(zhì)發(fā)生泄漏底挫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一脸侥、第九天 我趴在偏房一處隱蔽的房頂上張望建邓。 院中可真熱鬧,春花似錦睁枕、人聲如沸官边。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽注簿。三九已至契吉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間诡渴,已是汗流浹背捐晶。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留妄辩,地道東北人惑灵。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像眼耀,于是被迫代替她去往敵國和親英支。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361