JS 封裝一個async式的AJAX函數(shù)

其實(shí)也沒什么,就是用上ES7的異步函數(shù)菠齿,讓ajax使用起來更方便惭每。這個方便主要是體現(xiàn)在:無回調(diào) & 無then鏈?zhǔn)?& 輕松收集異常。
大致分3步:

1围段、封裝API類(這步不用異步函數(shù))

這一步一般會單獨(dú)建立一個文件顾翼!

// 定義一個API類,專門用于獲取各類數(shù)據(jù)
class Api {
  // 有的ajax請求是會做鑒權(quán)的奈泪,constructor里放這些鑒權(quán)參數(shù)
  constructor (token) {
    this.token =token;
  }
 // opt 里存放特定請求需要的參數(shù)适贸,如url等
  getUser (opt) {
    return new Promise((resolve, reject) => {
      $.ajax({
             headers:{
                  token:this.token
             },
             url:opt.url,
             data:opt.data,
             success:function(data){
                     resolve(data); 
             },
             error:function(error,status){
                     reject(error);
             }
      })
    })
  }
  //其他API定義區(qū)
  ...
}

2、進(jìn)一步封裝特定API(使用異步函數(shù))

這一步一般是在特定的需要調(diào)用某API時用到

// const api = new Api(token)一般會提前執(zhí)行涝桅,比如在vue組件script的import和export default之間執(zhí)行拜姿,這也是為了避免該語句在每個具體api里都執(zhí)行一次。

// 在vue中冯遂,可以將該函數(shù)放在methods里
async function loadUserData (opt) {
  try{
        const user = await api.getUser(opt)蕊肥;
        // 根據(jù)user狀態(tài)執(zhí)行業(yè)務(wù)邏輯
        ...
  }catch(e){
       // 請求異常的處理邏輯
  }
}

第三步:使用API

//  在vue中,可以將該代碼放在mounted里
 loadUserData(opt)

經(jīng)過這三步债蜜,基本就實(shí)現(xiàn)了無回調(diào)晴埂,無then鏈?zhǔn)秸{(diào)用和輕松處理錯誤這幾個比較煩人的問題啦!

參考

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末寻定,一起剝皮案震驚了整個濱河市儒洛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌狼速,老刑警劉巖琅锻,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異向胡,居然都是意外死亡恼蓬,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進(jìn)店門僵芹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來处硬,“玉大人,你說我怎么就攤上這事拇派『稍” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵件豌,是天一觀的道長疮方。 經(jīng)常有香客問我,道長茧彤,這世上最難降的妖魔是什么骡显? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上惫谤,老公的妹妹穿的比我還像新娘壁顶。我一直安慰自己,他們只是感情好溜歪,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布博助。 她就那樣靜靜地躺著,像睡著了一般痹愚。 火紅的嫁衣襯著肌膚如雪富岳。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天拯腮,我揣著相機(jī)與錄音窖式,去河邊找鬼。 笑死动壤,一個胖子當(dāng)著我的面吹牛萝喘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播琼懊,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼阁簸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了哼丈?” 一聲冷哼從身側(cè)響起启妹,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎醉旦,沒想到半個月后饶米,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡车胡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年檬输,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片匈棘。...
    茶點(diǎn)故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡丧慈,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出主卫,到底是詐尸還是另有隱情逃默,我是刑警寧澤,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布队秩,位于F島的核電站笑旺,受9級特大地震影響昼浦,放射性物質(zhì)發(fā)生泄漏馍资。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鸟蟹。 院中可真熱鬧乌妙,春花似錦、人聲如沸建钥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽熊经。三九已至泽艘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間镐依,已是汗流浹背匹涮。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留槐壳,地道東北人然低。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像务唐,于是被迫代替她去往敵國和親雳攘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評論 2 355

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

  • 異步編程對JavaScript語言太重要枫笛。Javascript語言的執(zhí)行環(huán)境是“單線程”的吨灭,如果沒有異步編程,根本...
    呼呼哥閱讀 7,311評論 5 22
  • 弄懂js異步 講異步之前刑巧,我們必須掌握一個基礎(chǔ)知識-event-loop沃于。 我們知道JavaScript的一大特點(diǎn)...
    DCbryant閱讀 2,712評論 0 5
  • 你不知道JS:異步 第三章:Promises 在第二章,我們指出了采用回調(diào)來表達(dá)異步和管理并發(fā)時的兩種主要不足:缺...
    purple_force閱讀 2,070評論 0 4
  • 相對于回調(diào)函數(shù)來說海诲,Promise是一種相對優(yōu)雅的選擇繁莹。那么有沒有更好的方案呢?答案就是async/await特幔。優(yōu)...
    勇往直前888閱讀 47,274評論 8 36
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持咨演,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券,享受所有官網(wǎng)優(yōu)惠蚯斯,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 11,026評論 26 95