vue 專案中對 axios的封裝

axios是乙個輕量的http客戶端。

基於xmlhttprequest服務來執行http請求，支援豐富的配置，支援promise，支援瀏覽器端和node.js端。自vue2.0起，尤大宣布取消對vue-resource的官方推薦，轉而推薦axios。現在axios已經成為大部分vue開發者的首選

特性：安裝

npm install axios -s

import axios from

'axios'

axios(}

).then
(res =>
)

不過隨著專案規模增大，如果每發起一次http請求，就要把這些比如設定超時時間、設定請求頭、根據專案環境判斷使用哪個請求位址、錯誤處理等等操作，都需要寫一遍。

這種重複勞動不僅浪費時間，而且讓**變得冗餘不堪，難以維護。為了提高我們的**質量，我們應該在專案中二次封裝一下axios再使用。

舉個例子：

// 其他請求配置...})

.then

((data)

=>

,(err)

=>

if(err.response.status ===

403)

// 其他錯誤處理.....

console.

log(err);}

);如果每個頁面都傳送類似的請求，都要寫一堆的配置和錯誤資訊，顯得很繁瑣，這時候對axios進行二次封裝，讓使用更加便利。

封裝的時候，需要和後端進行協調一些約定，比如請求頭、狀態碼、請求超過時間。。。

設定介面請求字首：根據開發、測試、生產環境的不同，字首需要加以區分。

請求頭：實現一些具體的業務，必須攜帶一些引數才可以請求。

狀態碼：根絕介面返回的status，來執行不同的業務，需要和後端進行約定。

請求方法：根據get、post等方法進行乙個再次封裝，使用起來更加方便。

請求***：根據請求的請求頭設定，來決定哪些請求時可以訪問的。

響應***：這塊就是根據 後端`返回來的狀態碼判定執行不同業務。

利用node環境變數作為判斷，用來區分開發環境和正式環境。

if

(process.env.
node_env
==='development'
)else
if(process.env.
node_env
==='production'
)

const service = axios.

create(,
post:},
})

// get 請求

// post請求
}],// 傳送的資料
data,
// url引數
()

// .vue

import
from
'@/assets/js/api'
getorglist()
.then
(res =>
)

請求***可以在每個請求裡面加上 token，做了統一處理之後維護起來也很方便。

// 請求***

axios.interceptors.request.
use(
config =>
, error =>
)

// 響應***

axios.interceptors.response.
use(response =>
else
if(response.data.code ===
510)
else
}else
}, error =>
})

import axios from

'axios'
;import
from
"@/assets/js/config"
;import vue from
'vue'
;// 設定超時時間和介面字首
let instance = axios.
create()
;// toast.allowmultiple(); 請求***
instance.interceptors.request.
use(
(config)
=>
) config.headers[
"content-type"]=
;let sessionid = localstorage.
getitem
("sessionid");
if(sessionid)
config.headers[
"channel"]=
; 
config.data =
json
.stringify
(config.data);}
return config;},
(err)
=>);
// 響應***
instance.interceptors.response.
use(
(res)
=>
,600);
}else
}return promise.
reject
(res);}
return res;},
(error)
=>
// vue.prototype.$message.error("請求出現錯誤！");
return promise.
reject
(error);}
);// url 也做了封裝，
const
post
=(requrl, data, config =
,authtoken)
=>
const
put=
(url, data, config =
)=>
const
get=
(url, params, config =
)=>)}
const
deletemethod
=(url, config =
)=>)}
// 將方法注入到 vue 原型中，再後續呼叫的時候只用寫 this.$reqpost('admin/list',)即可。
export
default
, $reqpost:
, $reqput:
, $reqdel:,}
)}}

vue專案中對axios的封裝

一 安裝npm install axios二 引入 一般我會在src目錄上建立乙個network資料夾 network資料夾中建立乙個config.js 用來封裝axios 和乙個api.js 用來統一管理介面 三 config.js 中配置axios 引入axios import axios fr...

vue專案中對axios的全域性封裝

專案中介面會很多，個人喜歡建立api檔案對請求統一管理 1.新建api資料夾，資料夾下建立 axios.js，login.js 2.axios.js import axios from axios import router from router 引入路由是為了做重定向，比如沒有登入過期定向到登入...

在vue專案中，對axios進行的封裝

由於專案需求，對axios進行了封裝。引入axios import axios from axios let cancel promisearr const canceltoken axios.canceltoken 請求 axios.interceptors.request.use config ...