vue封裝資料介面

2021-10-07 02:52:54 字數 820 閱讀 4731

1.安裝axios(npm install axios);

2.在src目錄下新建乙個http資料夾;

3.在http下新建兩個檔案:

api.js(用來統一資料請求介面);

request.js(封裝資料請求方法);

request.js檔案:

// 基本不用封裝,只是對請求的介面位址,超時,報錯處理

import axios from 'axios'

console.log('request.js中的環境變數:', process.env.build_env)

// 針對npm run 來自動讀取不同環境變數

const config_env = require(`../build/$.js`);

// 建立axios例項

const service = axios.create()

// 請求攔截

service.interceptors.request.use(config => , _error => )

// 響應攔截

service.interceptors.response.use(res => , error => )

export default service

api.js檔案

//引入request.js

import request from './request'

// 封裝專案中常用的業務介面

例:export function coursecomment(info) )

}

vue介面封裝

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

vue封裝介面

需要建立倆個js檔案 http.js 和 api.js 在http.js中引入axios,對get和post進行封裝請求方式,在這裡可以設定請求頭和超時時間,也可以進行環境的切換,這裡的環境指的是開發環境和生產環境,也可以設定請求攔截和響應攔截 在http.js中 第一步 引入axios impor...

vue封裝api介面

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