Vue axios的封裝以及具體使用

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*/
})

匯出

export

default request

以上您的axios封裝已經完成啦！當然axios封裝並不是唯一的，你也可以在請求攔截，響應攔截做其他處理，比如對使用者登入的token進行處理等等，你還可以對get，post再封裝等等，可根據自己的情況做調整。

然後我們來說說統一管理api。

引入request.js

import request from
'./request'

這是post請求

我們定義乙個searchcityzone方法，我們需要向後台傳乙個json，p就是請求介面時攜帶的引數物件，最後需要export匯出該方法。

export
function
searchcityzone
(p))
}

這是get請求

export
function
loanid
)}

現在我們要在頁面裡呼叫api的介面

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

Vue axios的封裝以及具體使用

vue axios封裝以及使用

vue axios的簡單封裝以及使用

vue axios 請求封裝

相關推薦