使用TypeScript從零重構(gòu)axios--學(xué)習(xí)總結(jié)

TypeScript 作為 JavaScript 語言的超集,它為 JavaScript 添加了可選擇的類型標(biāo)注付鹿,大大增強了代碼的可讀性和可維護性澜汤。同時,它提供最新和不斷發(fā)展的 JavaScript 特性舵匾,能讓我們建立更健壯的組件俊抵。
本篇文章主要介紹基于TypeScript從零重構(gòu)axios

  1. 處理請求 url 參數(shù)
axios({
  method: 'get',
  url: '/base/get',
  params: {
    a: 1,
    b: 2
  }
})

首先我們來分析一下怎么將多種類型的params拼接在url中。
(1)參數(shù)值為數(shù)組
最終請求的url/base/get?foo[]=bar&foo[]=baz
(2)參數(shù)值為對象
最終請求的 url 是 /base/get?foo=%7B%22bar%22:%22baz%22%7D纽匙,foo 后面拼接的是 {"bar":"baz"} encode后的結(jié)果务蝠。
(3)參數(shù)值為 Date 類型
最終請求的 url/base/get?date=2019-04-01T05:55:39.030Z拍谐,date 后面拼接的是 date.toISOString() 的結(jié)果烛缔。
(4)特殊字符支持
對于字符 @馏段、:$践瓷、,院喜、、[晕翠、]喷舀,我們是允許出現(xiàn)在 url 中的,不希望被 encode淋肾。
最終請求的 url/base/get?foo=@:$+硫麻,注意,我們會把空格 轉(zhuǎn)換成 +樊卓。
(5)空值忽略
對于值為 null 或者 undefined 的屬性拿愧,我們是不會添加到 url 參數(shù)中的。
最終請求的 url/base/get?foo=bar碌尔。
(6)丟棄 url 中的哈希標(biāo)記
最終請求的 url/base/get?foo=bar
(7)保留 url 中已存在的參數(shù)
最終請求的 url/base/get?foo=bar&bar=baz
(8)函數(shù)實現(xiàn)
helpers/url.ts:

import { isDate, isObject } from './util'

function encode (val: string): string {
  return encodeURIComponent(val)
    .replace(/%40/g, '@')
    .replace(/%3A/gi, ':')
    .replace(/%24/g, '$')
    .replace(/%2C/gi, ',')
    .replace(/%20/g, '+')
    .replace(/%5B/gi, '[')
    .replace(/%5D/gi, ']')
}

export function bulidURL (url: string, params?: any) {
  if (!params) {
    return url
  }

  const parts: string[] = []

  Object.keys(params).forEach((key) => {
    let val = params[key]
    if (val === null || typeof val === 'undefined') {
      return
    }
    let values: string[]
    if (Array.isArray(val)) {
      values = val
      key += '[]'
    } else {
      values = [val]
    }
    values.forEach((val) => {
      if (isDate(val)) {
        val = val.toISOString()
      } else if (isObject(val)) {
        val = JSON.stringify(val)
      }
      parts.push(`${encode(key)}=${encode(val)}`)
    })
  })

  let serializedParams = parts.join('&')

  if (serializedParams) {
    const markIndex = url.indexOf('#')
    if (markIndex !== -1) {
      url = url.slice(0, markIndex)
    }

    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
  }

  return url
}

helpers/util.ts:

const toString = Object.prototype.toString

export function isDate (val: any): val is Date {
  return toString.call(val) === '[object Date]'
}

export function isObject (val: any): val is Object {
  return val !== null && typeof val === 'object'
}

實現(xiàn) url 參數(shù)處理邏輯
我們已經(jīng)實現(xiàn)了 buildURL 函數(shù)浇辜,接下來我們來利用它實現(xiàn) url 參數(shù)的處理邏輯。

在 index.ts 文件中添加如下代碼:

function axios (config: AxiosRequestConfig): void {
  processConfig(config)
  xhr(config)
}

function processConfig (config: AxiosRequestConfig): void {
  config.url = transformUrl(config)
}

function transformUrl (config: AxiosRequestConfig): string {
  const { url, params } = config
  return bulidURL(url, params)
}

在執(zhí)行 xhr 函數(shù)前唾戚,我們先執(zhí)行 processConfig 方法柳洋,對 config 中的數(shù)據(jù)做處理,除了對 url 和 params 處理之外叹坦,未來還會處理其它屬性熊镣。

在 processConfig 函數(shù)內(nèi)部,我們通過執(zhí)行 transformUrl 函數(shù)修改了 config.url募书,該函數(shù)內(nèi)部調(diào)用了 buildURL轧钓。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市锐膜,隨后出現(xiàn)的幾起案子毕箍,更是在濱河造成了極大的恐慌,老刑警劉巖道盏,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件而柑,死亡現(xiàn)場離奇詭異,居然都是意外死亡荷逞,警方通過查閱死者的電腦和手機媒咳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來种远,“玉大人涩澡,你說我怎么就攤上這事∽狗螅” “怎么了妙同?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵射富,是天一觀的道長。 經(jīng)常有香客問我粥帚,道長胰耗,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任芒涡,我火速辦了婚禮柴灯,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘费尽。我一直安慰自己赠群,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布旱幼。 她就那樣靜靜地躺著乎串,像睡著了一般。 火紅的嫁衣襯著肌膚如雪速警。 梳的紋絲不亂的頭發(fā)上叹誉,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天,我揣著相機與錄音闷旧,去河邊找鬼长豁。 笑死,一個胖子當(dāng)著我的面吹牛忙灼,可吹牛的內(nèi)容都是我干的匠襟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼该园,長吁一口氣:“原來是場噩夢啊……” “哼酸舍!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起里初,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤啃勉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后双妨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體淮阐,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年刁品,在試婚紗的時候發(fā)現(xiàn)自己被綠了泣特。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡挑随,死狀恐怖状您,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤膏孟,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布眯分,位于F島的核電站,受9級特大地震影響骆莹,放射性物質(zhì)發(fā)生泄漏颗搂。R本人自食惡果不足惜担猛,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一幕垦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧傅联,春花似錦先改、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至比驻,卻和暖如春该溯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背别惦。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工狈茉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人掸掸。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓氯庆,卻偏偏與公主長得像,于是被迫代替她去往敵國和親扰付。 傳聞我的和親對象是個殘疾皇子堤撵,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容