溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue中如何封裝多個組件調用同一接口，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
背景：項目中有多個組件調用同一接口，為提高代碼可維護性，需要封裝公共方法
直接return 接口調用的結果
export function getAll() {
let all = [];
let opt = {
method: 'get',
url: 'all/teacher',
success: res => {
all = res.data.value || [];
},
fail: err => {
tipInfo(err.data.desc, '提示', false, 'warning');
}
};
$http(opt);
return all;
}
console.log(getAll()); // []$http是在axios基礎 進行封裝的，是一個異步的方法，所以在組件中調用getAll()方法，拿到的是一個空數組
使用promise進行封裝
export function getAll() {
return new Promise((resolve, reject) => {
let opt = {
method: 'get',
url: 'all/teacher',
success: res => {
resolve(res.data.value || []);
},
fail: err => {
reject(err.data.desc);
}
};
$http(opt);
});
}
// 調用
getAll()
.then(data => {
console.log(data); //
})
.catch(err => {
this.tipInfo(err.data.desc, '提示', false, 'warning');
});使用promise進行封裝后，方法，不夠簡潔，達不到優化的目的
使用回調函數進行封裝
export function getAll(callback) {
let opt = {
method: 'get',
url: 'all/teacher',
success: res => {
callback(res.data.value || []);
},
fail: err => {
tipInfo(err.data.desc, '提示', false, 'warning');
}
};
$http(opt);
}
// 調用
getAllPark(data => {
console.log(data); // 成功拿到數據
});補充知識：vue多個頁面用到同一個接口的數據（ 比如名稱列表 ），使用 vuex
第一種： 調接口不傳參數
1、在 store文件夾下的 modules文件夾下新建 getName.js
// getName.js
import { getNameList } from "@/apis/apis"; // 導入接口
export default {
state: {
nameList: [] // 名稱列表
},
mutations: {
changeNameList(state, payload) {
state.nameList= payload;
}
},
actions: {
geName(context) {
getNameList ({}).then(res => {
if (res.code == 0) {
context.commit("changeNameList", res.data);
} else {
Message.error(res.message);
}
});
}
}
};2、在 store文件夾下 index.js 中引入 getName.js
import getNamefrom "./modules/getName";
export default new Vuex.Store({
modules: {
getName
},
});3、在整個項目剛開始加載的時候就是用 dispatch 分發，這樣就不管在哪個頁面需要使用到都可以使用
比如打開頁面首頁的時候，在mounted里面就 dispatch 觸發geName函數
<script>
export default {
mounted() {
this.$store.dispatch('geName')
},
}4、如在多個頁面都需要使用 nameList ， 以在某一個頁面使用為例，其余頁面一樣用法
<template>
<div>
<el-select v-model="form.name" placeholder="請選擇名稱" clearable>
<el-option v-for="item in nameList" :key="item.id" :label="item.fieldName" :value="item.fieldName"></el-option>
</el-select>
</div>
</template>
<script>
export default {
computed: {
nameList() {
return this.$store.state.getName.nameList
}
},
}
</script>第二種： 調接口傳參數
import movieService from '../services/movieService.js'
export default {
namespaced: true,
state: {
current: 1,
pageSize: 2,
total: 0,
datas: [],
isLoading: false
},
mutations: { //改變狀態的通用方法 設置整個狀態
setState(state, newState) {
for (const prop in newState) {
state[prop] = newState[prop]
}
}
},
actions: {
fetch(context) { // 根據當前的分頁設置，獲取電影
context.commit("setState", { isLoading: true })
movieService.getMovies(context.state.current, context.state.pageSize).then(resp => {
console.log(resp)
context.commit("setState", resp)
context.commit("setState", { isLoading: false })
})
}
}
}// 在 movieService.js
export default {
async getMovies(page, pageSize) {
const datas = await fetch("https://api.myjson.com/bins/15f8x1")
.then(resp => resp.json())
return {
total: datas.length,
datas: datas.slice((page - 1) * pageSize, page * pageSize) //返回分頁的電影數據
}
},
//通過id獲取電影數據
async getMovie(id) {
const datas = await fetch("https://api.myjson.com/bins/15f8x1")
.then(resp => resp.json())
return datas.find(item => item._id === id)
}
}在頁面使用：
mounted() { //遠程獲取數據
this.$store.dispatch("movie/fetch") //出發vuex中movie.js里的action，獲取數據
},感謝你能夠認真閱讀完這篇文章，希望小編分享vue中如何封裝多個組件調用同一接口內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
