Axiosf二次封裝,拒絕重複搬磚

2021-10-17 11:16:15 字數 2933 閱讀 3223

axios是基於promise的http庫,可以用於瀏覽器和node.js中。但在真實專案中需要對axios進行輕度的封裝,告別一些重複操作**

使用npm

npm i axios
使用cdn

""

>

<

/script>

建立http.js檔案

import axios from

'axios'

;

使用vue-cil執行專案時,打包過程是在node.js環境下進行的,其中process.env.node_env可以得到時自定義的打包的環境

switch

(process.env.

node_env

)

/**

* 設定請求***

* * 向伺服器請求後,獲取token並且將其儲存到vuex或本地儲存中

* 每次向伺服器請求時,都應該將token帶上

*/axios.interceptors.request.

use(config =>

, err =>

)

axios.interceptors.response.

use(res =>

return res.data;

//直接返回資料主體,沒必要在每次請求獲取資料時,反覆判斷是否成功然後獲取主體資料

}, err=>

= err;

if(response)

}else

//伺服器方面的錯誤

//給使用者提示}}

)

export

default)}

, post:

async

function

(url, data, config =),

}

import axios from

"axios"

;import store from

"@/config/mutils"

;import qs from

'qs'

;/**

* 根據環境區分不同的ip位址

*/console.

log(process.env.

node_env);

switch

(process.env.

node_env

)/**

* 設定響應時間,跨域是否攜帶憑證

*/axios.defaults.timeout =

30000

;axios.defaults.withcredentials =

false

;/**

* 設定請求傳遞資料的格式 (主要看伺服器要求是什麼格式)

* x-www-form-urlencoded (鍵值對形式:***=***) 伺服器常用格式

* */

axios.defaults.headers[

"content-type"]=

;//明確傳遞資料格式

/** * post請求,傳遞資料

* 將post請求傳遞給伺服器的資料轉換成***=***(鍵值對)的格式,

*/axios.defaults.

transformrequest

=(data, config)

=>

return data;

}// 校驗響應回來的狀態碼

axios.defaults.

validatestatus

= status =>

/** * 設定請求***

* * 向伺服器請求後,獲取token並且將其儲存到vuex或本地儲存中

* 每次向伺服器請求時,都應該將token帶上

*/axios.interceptors.request.

use(config =>

, err =>

)/**

* 響應***

*/axios.interceptors.response.

use(res =>

}return res.data;

//直接返回資料主體,沒必要在每次請求獲取資料時,反覆判斷是否成功然後獲取主體資料

}, err =>

= err;

console.

log(response);if

(response)

}else

alert

("請重試");

}});

export

default)}

, post:

async

function

(url, data, config)

,}

vue中使用可以將匯出的物件定義在vue原型上,防止在每個vue檔案中都需要將http.js檔案導一次

//...在每個vue子例項中,可以直接this.$http.get(url,data)呼叫方法,發起請求

參考:axios中文文件

Volley二次封裝

一 簡介 volley 是 goole i o 2013上發布的網路通訊庫,使網路通訊更快 更簡單 更健壯。二。優點 三。缺點 四。使用 在專案中網路請求是乙個必須的功能,為了減少 的重複,需要對volley進行二次封裝。private static requestqueue queues over...

axios二次封裝

引入路由 import router from router index 引入vuex import store from store index 引入提示元件 import from element ui 引入api import apilist from apilist 引入qs let htt...

vue axios二次封裝

模組化程式設計思想部分前後端,哈,道理都通 1 環境 基於框架 vue 基於http庫 axios 2 步驟 前提 使用vue腳手架建立乙個專案或者基於已存在的專案測試 1,在工程目錄中安裝axios npm install axios 2,在專案目錄的src資料夾下新建utils資料夾,在該資料夾...