vue封裝介面

2021-10-24 12:41:53 字數 1139 閱讀 5704

需要建立倆個js檔案 http.js 和 api.js

在http.js中引入axios,對get和post進行封裝請求方式,在這裡可以設定請求頭和超時時間,也可以進行環境的切換,這裡的環境指的是開發環境和生產環境,也可以設定請求攔截和響應攔截

在http.js中

//第一步:引入axios 

import axios from 'axios';

//在這裡設定開發環境和生產環境的預設路徑

//development是開發環境 production是生產環境

if(process.env.node_env=='development')

if(process.env.node_env=='production')

//這裡是設定請求超時時間 時間為5秒

axios.defaults.timeout=5000;

//在請求攔截裡設定許可權 這裡是設定的是h5的許可權

//如果不設定的話資料會請求失敗或為空資料,在這裡也可以用來判斷token

axios.interceptors.request.use(

config=>

return config;

})//封裝get請求

export function get(url,params)).then(res=>).catch(err=>)

})}//封裝post請求

export function post(url,params)).catch(err=>)

})}

在api.js中

//引入http.js中的get和post請求

//對請求的資料進行封裝

export function getbanner()

在vue檔案中使用封裝好的方法

//引入封裝好的方法getbanner

import from "../../api/api.js";

async mounted()

vue介面封裝

總結 因為從開發到最終上線的過程中,api是需要經常更換的,為了我們更好的統一管理,所以需要將api封裝起來。在主目錄下建立utils資料夾,並在其中新建request.js檔案用於封裝請求。如下 示例 import axios from axios import from element ui i...

vue封裝資料介面

1.安裝axios npm install axios 2.在src目錄下新建乙個http資料夾 3.在http下新建兩個檔案 api.js 用來統一資料請求介面 request.js 封裝資料請求方法 request.js檔案 基本不用封裝,只是對請求的介面位址,超時,報錯處理 import ax...

vue封裝api介面

在沒有封裝api之前,我們是類似這樣使用 axios 的 this.axios.post blogarticle frontlist parms then resp 封裝之後這樣呼叫 userlist parms then resp 我們先不看具體是怎麼封裝的,但看使用,發現好像寫的 一樣多呢。等你...