vue 封裝axios請求模板

目錄結構：

http目錄下的index.js

import axios from

'axios'
import nprogress from
'nprogress'
import
from
'element-ui'
// 執行環境: 本地環境:devlpment 和線上(生產)環境: production
const ispro = process.env.
node_env
==='production'
// 建立乙個axios的例項
const service = axios.
create()
// 請求攔截: 每一次發請求都會做的事情
service.interceptors.request.
use(
(config)
=>
return config
}, err =>
)// 響應攔截: 每一次介面返回資料的時候都會做的事情
service.interceptors.response.
use(
(res)
=>
, err =>
if(status ===
401)
if(status ===
403)
if(status ===
404)
if(status ===
500)
if(status ===
503)
}return promise.
reject
(err)})
export
default service

import service from

'./index'
import qs from
'qs'
export
default))
;},//獲取選單
getmenus()
,//資料統計
reports()
,//使用者列表 query:查詢引數 pagenum:當前頁碼 pagesize:每頁顯示條數
getusers()
&pagenum=
$&pagesize=$`
);},
//所有許可權列表
getrights()
,//角色列表
getroles()
,//刪除角色指定許可權
deleteroleright()
/rights/$`
);},
//角色授權
setroleright()
/rights`
, qs.
stringify()
,,});}}

vue 封裝axios請求

最近接手新的vue專案，發現axios竟然沒有封裝，立馬動手封裝，這裡記錄一下完整的封裝過程，廢話不說，直接上 baseconfig.js檔案 存放各個伺服器的位址 const express require express const proenv require pro.env 生產環境配置檔案...

vue封裝axios請求

新建檔案src utils request.js import axios from axios 自定義配置建立axios的新例項 const service axios.create 無論請求為何種型別，在params中的屬性都會以key value的格式在urlzhong拼 headers 請求...

Vue封裝axios請求

為了方便呼叫api介面，我們封裝axios請求 並在api資料夾中建立兩個兩個js檔案 http.js api.js http.js檔案中寫入 import axios from axios axios.defaults.baseurl axios.defaults.timeout 1000000 ...