react專案axios配置

2021-10-19 08:39:57 字數 3357 閱讀 8109

baseapi.ts

import axios,

from

'axios'

import md5 from

'js-md5'

import

from

'antd'

import cookieutils from

'../utils/cookieutils'

import

from

'../types'

import

from

'./constant'

import actions from

'src/store/modules/login/actions'

import store from

'../store'

const dispatch: any = store.dispatch

// 儲存請求標識

const pending: any=

const

= axios

inte***ce

irequest

export

default

class

baseapi

)async

request

(query: irequest)

, config =

, returnall =

false

, errormessagealert =

true

, errmsg }

= query

const paramsobj =

['get'].

includes

(method)?:

const promise =

newpromise

(async

(resolve, reject)

=>

)// 無返回資料if(

!result)

else

reject()

}this

.checkcodefunc

(result,)}

catch

(error)}

)return promise

}/** * 返回資料code處理

*/checkcodefunc

(result: any, params: any)

= params

const status = result.status.

tostring()

.substr(0

,2)if

(['20'].

includes

(status)

)= data

if(!

!retcode && retcode.

tostring()

!==service_code

.success))

)}reject

(result.data)

return

}elseif(

sys_yunxin_error

.includes

(retcode.

tostring()

)),}

)}else

errormessagealert && message.

error

(retdesc +'')

reject

(result.data)}}

else

else}}

else

else$`)

// }

message.

error

('系統異常,稍後重試'

)reject

(result)}}

/** * passport校驗登入狀態

*/checkpassportloginstate()

iwindow.

probeauthstatus

((principal: any)

=>,(

)=>,}

)reject

('登入超時,請重新登入!')}

)}else})

}passportinterval()

else

}/**

* @desc 檢查http狀態碼, 判斷http層面呼叫結果

* @param res

*/checkstatus

(res: axiosresponse)

}else$!`

, retdata: res,}}

}/**

* @desc 檢查返回的資料code值,判斷業務服務層面呼叫結果

* @param res

*/checkcode

(res: iresponse

)= res

const msg = res.retdesc ||

service_msg

[retcode]

switch

(retcode)

message.

warning

(msg)

}/**

* @desc 根據請求的url和method生成hash標識

* @param url

* @param method

*/hashtag

(config: axiosrequestconfig)

: string $`

)}/** * @desc 取消未響應的重複請求, 並從記錄中移除對應的hash標識

* @param config

*/removepending

(config: axiosrequestconfig)

= item

if(currenttag === tag)})

}// 請求與響應的攔截

react專案的axios封裝

分享乙個 react axios 的元件封裝 請求 帶token放請求頭 import axios from axios import qs from qs import from antd import cookies from js cookie export default function ...

解決react專案中跨域和axios封裝使用

1 開啟專案生成的package.json檔案,修改檔案內容如下 在此位置新增如下 proxy http 服務位址 2 建立http.js,如下 axios封裝 import axios from axios import from antd 響應 axios.interceptors.respon...

如何在react專案中使用axios和mock資料

你好!我們在react專案中需要經常使用axios請求mock模擬資料,本文將簡單粗暴介紹如何使用axios請求mock資料。各位看官您往下看。1.在需要的頁面中引入axios import axios from axios 2.mock模擬資料的操作 2.1在src資料夾下建mock資料夾和ind...