封裝乙個axios 利用xhr和promise

2021-10-09 19:55:46 字數 1220 閱讀 7663

基本思路

一:建立乙個promise物件,成功的結果為response, 異常的結果為error

二:利用xhr建立乙個ajax請求

2.1建立xhr物件

2.2開啟連線(初始化請求)

2.3 根據請求方式來決定要不要傳請求體引數

2.4監視狀態,如果請求成功呼叫reject(),失敗resolve()

獲取狀態

// 2.4.2如果請求成功(status在[200, 299])時執行resolve(response物件)

// 2.4.3如果請求失敗時執行reject(error物件)

import react from

'react'

export

default

function()

,// 對應生成query引數

data=

// 對應生成請求體引數})

生成帶query引數的url: http://localhost:3000/posts?id=2&title=***

*/// 根據params物件生成query引數字串id=2&title=***

let querystr =

''/* object.keys(object): 得到物件自身上所有屬性名的陣列 */

object.

keys

(params)

.foreach

(key =>=$

` }

)// &id=2&title=***

if(querystr!=='')

開啟連線(初始化請求)

xhr.

open

(method, url,

true

) 根據請求方式來決定要不要傳請求體引數

if(method===

'get'

)else

監視狀態,如果請求成功呼叫reject(),失敗resolve()

xhr.

onreadystatechange

=function()

resolve

(response)

}else}}

)}return

(<

/div>

)}

用XHR簡單封裝乙個axios

get請求 button button onclick testpost post請求 button button onclick testput put請求 button button onclick testdelete delete請求 button div script function t...

用axios封裝乙個jq版的ajax

封裝axios,減少學習成本,引數基本跟jq ajax一致 param type 請求的型別,預設post param url 請求位址 param time 超時時間 param data 請求引數 param datatype 預期伺服器返回的資料型別,xml html json param h...

Axios請求封裝乙個公共的請求頭

assets commom js 下新建乙個js檔案 eg requestparams.js function buildrequestparam conparam con conparam return param 重要的事情說三遍,一定要匯出,一定要匯出,一定要匯出 export default...