參考一
import axios from
'axios'
import qs from
'qs'
import store from
'../store/index'
import
from
'element-ui'
/* * 一、request：
* 1. 說明：封裝對後台的請求，可以選擇自動處理一些異常。
* 2. 引數：
* - params： 請求引數，選填，object，，預設值：{}
* - config： axios引數，選填，object，預設值：{}
* - autoerrorres： 是否自動處理響應錯誤，選填，boolean，預設值：true
* - autoerrordata：是否自動處理後台錯誤，選填，boolean，預設值：true
* - autocancel： 離開路由時是否自動取消請求，選填，boolean，預設值：true
* 3. 返回：
* - 成功：promise.resolve(請求成功後的結果：response.data)
* - 失敗：
* - 請求異常：promise.reject(http響應錯誤)
* - 請求失敗：promise.reject(請求失敗後的結果：response.data)
* 4. 約定後台返回資料格式：
* response.data = , // 成功時可選引數，請求的響應資料
* "message": "使用者名字重複" // 失敗時必需引數，錯誤提示
* }
* * 二、sessionrequest：
* 1. 說明：利用sessionstorage快取請求，可以選擇outtime，其他同request。
* 2. 引數：
* - outtime：距離上次請求多少秒後需要重新請求，選填，integer，小於0表示不重新請求，預設值：-1
* * 三、localrequest：
* 1. 說明：利用localstorage快取請求，可以選擇outtime，其他同request。
* 2. 引數：
* - outtime：距離上次請求多少秒後需要重新請求，選填，integer，小於0表示不重新請求，預設值：604800（一周）
* **/
//將格式設定為formdata
axios.defaults.headers.post[
'content-type']=
;axios.defaults.headers.
get[
'content-type']=
;axios.defaults.transformrequest =
[function
(data)
return ret}]
const axioscustom = axios.
create()
//jwt驗證，每次發給伺服器的所有請求頭部都加入token
axioscustom.interceptors.request.
use(
function
(config)
)/* 普通請求 */
export
const request =
(url,params =
,methods=
'post'
, config =
, autoerrorres =
true
, autoerrordata =
true
, autocancel =
true
)=>
, config)
}const args = object.
assign
(, config)if(
!['put'
,'post'
,'patch'].
includes
(args.method.
tolowercase()
)))}
}return
axioscustom
(args)
.then
((res)
=>
if(autoerrordata && res.data.
hasownproperty
('code'
)&& res.data.code !==
"0")
return res.data
},(error)
=>
const errstatus = error.response.status ||
-100
if(autoerrorres&&error.message))}
return promise.
reject
(error)})
}/* 使用sessionstorage快取的請求 */
export
const
sessionrequest
=(url, params =
, config =
, outtime =-1
, autoerrorres =
true
, autoerrordata =
true
, autocancel =
true
)=>
}return
request
(url, params, config, autoerrorres, autoerrordata, autocancel)
.then
(data =>))
return data
})}/* 使用localstorage快取的請求 */
export
const
localrequest
=(url, params =
, config =
, outtime =
604800
, autoerrorres =
true
, autoerrordata =
true
, autocancel =
true
)=>
}return
request
(url, params, config, autoerrorres, autoerrordata, autocancel)
.then
(data =>))
return data
})}
import axios from
'axios'
import env from
'./env'
import store from
'../store'
import router from
'../router'
import
from
'ant-design-vue'
//專案不同環境的baseurl
// axios.defaults.baseurl = env.baseurl
// 設定預設超時時間10s
// axios.defaults.timeout = 10000
// 建立axios例項
let instance = axios.
create()
/** * 跳登入頁面
*/const
tologin=(
)=>
/** * 請求失敗後的統一錯誤處理
*/const
errorhandle
=(status, other)
=>
}// 請求***
instance.interceptors.request.
use(config =>
` }
return config
}, error =>
)// 響應***
instance.interceptors.response.
use(
// 2xx返回（測試202）
response =>
else
}else},
// 2xx以外返回
error =>
= error
if(response)
else})
export
default instance
axios請求封裝
首先在vue專案下安裝axios以及支援非同步提示的iview元件庫 npm install axios npm install iview 在src資料夾下新建axios資料夾，在其中新建api.js用於存放介面，request.js用於封裝axios物件 編寫request.js 123 456...
axios請求封裝
axios請求封裝 新建http.js import axios from axios 匯入axios import router from router 匯入路由 import qs from qs import from element ui 匯入element ui const configb...
axios 請求與封裝
get請求的兩種方法 from data 表單提交 上傳 檔案上傳 let data axios.post post data then res axios then res from data 表單提交 let formdata new formdata for let key in data a...