vue封裝axios請求 1

// 引入 axios

import axios from
'axios'
// 設定baseurl 
axios.defaults.baseurl =
'';// 新增請求***
axios.interceptors.request.
use(config =>
return config;
}, error =>);
// 新增響應***
axios.interceptors.response.
use(
(response)
=>
,(err)
=>
)break
case
403:
err.message =
'拒絕訪問'
break
case
404:
err.message =
`請求位址出錯: $`
break
case
408:
err.message =
'請求超時'
break
case
500:
err.message =
'伺服器內部錯誤'
break
case
501:
err.message =
'服務未實現'
break
case
502:
err.message =
'閘道器錯誤'
break
case
503:
err.message =
'服務不可用'
break
case
504:
err.message =
'閘道器超時'
break
case
505:
err.message =
'http版本不受支援'
break
default:}
}return promise.
reject
(err);}
)

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 ...