vue init webpack deaxios # 使用腳手架建立專案 deaxios（專案名，隨便取得）
cd deaxios # 進入專案
npm install [email protected]
.2# 安裝axios
npm i element-ui -s # 安裝element-ui到當前專案
// 第一步：例項化axios物件，簡單封裝
const axios =
require
('axios');
// 生成乙個axios例項
axios.defaults.baseurl =
'';// 設定請求後端的url位址
axios.defaults.timeout =
10000
;// axios請求超時時間
axios.defaults.withcredentials =
true
;
axios.defaults.headers[
'content-type']=
;// axios傳送資料時使用json格式
axios.defaults.
transformrequest
= data =>
json
.stringify
(data)
;// 傳送資料前進行json格式化
// 第二：設定***
/** * 請求***(當前端傳送請求給後端前進行攔截)
* 例1：請求***獲取token設定到axios請求頭中，所有請求介面都具有這個功能
* 例2：到使用者訪問某乙個頁面，但是使用者沒有登入，前端頁面自動跳轉 /login/ 頁面
*/axios.interceptors.request.
use(config =>
, error =>);
/** * 響應***（當後端返回資料的時候進行攔截）
* 例1：當後端返回狀態碼是401/403時，跳轉到 /login/ 頁面
*/axios.interceptors.response.
use(response =>
, error =>);
/** * get方法，對應get請求
* @param url [請求的url位址]
* @param params [請求時攜帶的引數]
*/export
function
get(url, params, headers)).
then
(res =>).
catch
(err =>)}
)}// 第三：根據上面分裝好的axios物件，封裝 get、post、put、delete請求
/** * post方法，對應post請求
* @param url [請求的url位址]
* @param params [請求時攜帶的引數]
**/export
function
post
(url, params, headers)).
catch
((err)
=>)}
)}export
function
put(url, params, headers)).
catch
((err)
=>)}
)}export
function
del(url, params, headers)).
then
((res)
=>).
catch
((err)
=>)}
)}export
default axios;
/* eslint-disable */
import
from
'./index'
// 使用者登入
export
const
login
=(params, headers)
=>
post
("/login/"
, params, headers)
vue axios 請求封裝
import axios from axios import router from router index import from element ui import from utils loading import from utils auth import qs from qs 引入qs...
封裝vue axios請求
util.js import axios from axios import qs from qs import from vant h5用的這個 const apiurl xx 訪問介面位址 設定超時時間 請求頭等 axios.defaults.timeout 30000 axios.defaul...
vue axios請求封裝
在src檔案下自定義乙個api.js import axios from axios 建立乙個axios物件 const 建立乙個唯讀檔案 const instance axios.create 請求攔截 所有的網路請求都會先走這個方法 instance.interceptors.request.u...