axios的介紹
在vue專案中，傳送請求獲取資料這塊，我們通常使用的是axios庫，它是基於promise的http庫，可執行在瀏覽器端和node.js中。他可以配置攔截請求和響應、取消請求、轉換json、客戶端防禦csrf等。
安裝
npm install axios; // 安裝axios複製**
引入
一般我會在專案的src目錄中，utilis資料夾下建立request.js檔案用來封裝我們的axios，api資料夾下的js用來統一管理我的介面。（資料夾路徑按個人習慣來）。
引入和建立axios,axios裡邊的配置也可單獨設定，下邊有**說明
import axios from
'axios'
import
from
'element-ui'
const service = axios.
create(}
)
axios.defaults.baseurl可以設定axios的預設請求位址,可以根據你的需要，來切換url.
axios.defaults.baseurl =
'';
通過axios.defaults.timeout設定預設的請求超時時間。例如超過了5s，就會告知使用者當前請求超時，請重新整理等。
axios.defaults.timeout =
5000
;
axios.defaults.headers.post[
'content-type']=
;
我們在傳送請求前可以進行乙個請求的攔截，我這裡列舉的是需要在請求上統一加上當前的token做驗證，具體要做的可以根據你專案要求，也可以不設定攔截。
請求***
axios.interceptors.request.
use(
config =>
,
error =>
響應***很好理解，就是伺服器返回給我們的資料，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果後台返回的狀態碼是200，則正常返回資料，否則的根據錯誤的狀態碼型別進行一些我們需要的錯誤，其實這裡主要就是進行了錯誤的統一處理和沒登入或登入過期後調整登入頁的乙個操作。我這裡列舉了http不同狀態碼對應的提示。
service.interceptors.response.
use(response =>
, err =>
` }
}else
//這裡丟擲資訊用的是引入的message
message()
return promise.
resolve
(err.response)
})
get方法：我們通過定義乙個get函式，get函式有兩個引數，第乙個引數表示我們要請求的url位址，第二個引數是我們要攜帶的請求引數。get函式返回乙個promise物件，當axios其請求成功時resolve伺服器返回 值，請求失敗時reject錯誤值。最後通過export丟擲get函式。
/**
* get方法，對應get請求
* @param url [請求的url位址]
* @param params [請求時攜帶的引數]
*/export
function
get(url, params)).
then
(res =>).
catch
(err =>)}
);}
/**
* 封裝post請求
* @param url
* @param data
* @returns
*/import
qsfrom
'qs'
export
function
post
(url,data =
),err =>)}
)}
api資料夾下js的使用
import request from
"@/utils/request "
;const api=
/topics`);
},// post提交
login
(params)
/accesstoken`
, qs.
stringify
(params));
}}export
default api
import request from
"@/utils/request "
;export
function
getuserpowers
(data,url, header))}
}
vue中axios的封裝使用
npm install axios s 或者 npm i axios simport axios from axios vue.prototype.axios axios 將axios繫結到vue的原型上module.exports before import axios from axios im...
vue中axios正確的封裝使用
一 為什麼vue用axios不用jquery ajax？二 安裝axios npm install axios d?三 引入axios，封裝get post請求，處理請求過程 這裡需要注意的是 post方法必須要使用對提交從引數物件進行序列化的操作，這裡我們通過node的qs模組來序列化我們的引數。...
vue中axios的封裝
cnpm install axios s 第二步建立乙個htttp.js response 從哪個頁面跳轉 return response error 封裝get方法 param url param data returns export function fetch url,params then...