axios是基於promise的http庫,我們可以用它來 攔截請求和響應、取消請求、轉換json、客戶端防禦csrf等,所以我們更推薦axios跟後台進行資料互動。
npm install axios
在src資料夾下新建request資料夾,在裡面新建request.js跟api.js;
request.js用來封裝axios,api.js用來統一管理介面。
引入axios
建立import axios from
'axios'
;import
from
'vant'
;
axios例項
設定/** 建立axios例項*/
const request = axios.
create
()
全域性配置
/** global config */
request.defaults.baseurl = process.env.
api_host
;//設定請求路徑的網域名稱部分(可以檢視我上篇文章)
request.defaults.headers.post[
'content-type']=
;//post請求頭的設定
request.defaults.timeout =
30000
;//設定請求超時
request.defaults.withcredentials =
true
;//send cross-domain request credentials
請求攔截
/** request interceptor*/
request.interceptors.request.
use(
config =>
, error =>
)
響應攔截
/** response interceptor*/
})
匯出
以上您的axios封裝已經完成啦!當然axios封裝並不是唯一的,你也可以在請求攔截,響應攔截做其他處理,比如對使用者登入的token進行處理等等,你還可以對get,post再封裝等等,可根據自己的情況做調整。export
default request
然後我們來說說統一管理api。
引入request.js
這是import request from
'./request'
post
請求
我們定義乙個searchcityzone方法,我們需要向後台傳乙個json,p就是請求介面時攜帶的引數物件,最後需要export匯出該方法。
這是export
function
searchcityzone
(p))
}
get
請求
現在我們要在頁面裡呼叫api的介面export
function
loanid
)}
引入api介面
使用import
from
"../request/api"
;
定義乙個方法,在裡邊呼叫api。
以上就是從封裝到使用的全步驟,希望可以幫助到你!getcityzone()
)searchcityzone
(cityid)
.then
(res =>).
catch
(err =>
)}
vue axios封裝以及使用
api.js裡面存放封裝的axios 如下 在vue頁面的script標籤中引入 import from ajax api tget,tpost,tformpost,tput,tdel 需要什麼方式引入什麼方式,例如 import from ajax api 可以直接這麼引入乙個 寫頁面的畫就不用寫...
vue axios的簡單封裝以及使用
1 為什麼要封裝axios?2 怎樣封裝axios?2.1 首先安裝axios,並說明檔案的作用 在命令視窗輸入指令 cnpm install axios s 如果有安裝 映象,可以直接使用cnpm,沒有的話,用npm 2.2 core.js 主要的核心 對axios方法的封裝 引入config.j...
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...