vue之封裝多個(gè)組件調(diào)用同一接口的案例
更新時(shí)間：2020年08月11日 14:50:50 作者：_freely
這篇文章主要介紹了vue之封裝多個(gè)組件調(diào)用同一接口的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
背景：項(xiàng)目中有多個(gè)組件調(diào)用同一接口，為提高代碼可維護(hù)性，需要封裝公共方法
直接return 接口調(diào)用的結(jié)果
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基礎(chǔ) 進(jìn)行封裝的，是一個(gè)異步的方法，所以在組件中調(diào)用getAll()方法，拿到的是一個(gè)空數(shù)組
使用promise進(jìn)行封裝
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);
});
}
// 調(diào)用
getAll()
.then(data => {
console.log(data); //
})
.catch(err => {
this.tipInfo(err.data.desc, '提示', false, 'warning');
});
使用promise進(jìn)行封裝后，方法，不夠簡(jiǎn)潔，達(dá)不到優(yōu)化的目的
使用回調(diào)函數(shù)進(jìn)行封裝
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);
}
// 調(diào)用
getAllPark(data => {
console.log(data); // 成功拿到數(shù)據(jù)
});
補(bǔ)充知識(shí)：vue多個(gè)頁(yè)面用到同一個(gè)接口的數(shù)據(jù)（ 比如名稱(chēng)列表 ），使用 vuex
第一種： 調(diào)接口不傳參數(shù)
1、在 store文件夾下的 modules文件夾下新建 getName.js
// getName.js
import { getNameList } from "@/apis/apis"; // 導(dǎo)入接口
export default {
state: {
nameList: [] // 名稱(chēng)列表
},
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、在整個(gè)項(xiàng)目剛開(kāi)始加載的時(shí)候就是用 dispatch 分發(fā)，這樣就不管在哪個(gè)頁(yè)面需要使用到都可以使用
比如打開(kāi)頁(yè)面首頁(yè)的時(shí)候，在mounted里面就 dispatch 觸發(fā)geName函數(shù)
<script>
export default {
mounted() {
this.$store.dispatch('geName')
},
}
4、如在多個(gè)頁(yè)面都需要使用 nameList ， 以在某一個(gè)頁(yè)面使用為例，其余頁(yè)面一樣用法
<template>
<div>
<el-select v-model="form.name" placeholder="請(qǐng)選擇名稱(chēng)" 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>
第二種： 調(diào)接口傳參數(shù)
import movieService from '../services/movieService.js'
export default {
namespaced: true,
state: {
current: 1,
pageSize: 2,
total: 0,
datas: [],
isLoading: false
},
mutations: { //改變狀態(tài)的通用方法 設(shè)置整個(gè)狀態(tài)
setState(state, newState) {
for (const prop in newState) {
state[prop] = newState[prop]
}
}
},
actions: {
fetch(context) { // 根據(jù)當(dāng)前的分頁(yè)設(shè)置，獲取電影
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) //返回分頁(yè)的電影數(shù)據(jù)
}
},
//通過(guò)id獲取電影數(shù)據(jù)
async getMovie(id) {
const datas = await fetch("https://api.myjson.com/bins/15f8x1")
.then(resp => resp.json())
return datas.find(item => item._id === id)
}
}
在頁(yè)面使用：
mounted() { //遠(yuǎn)程獲取數(shù)據(jù)
this.$store.dispatch("movie/fetch") //出發(fā)vuex中movie.js里的action，獲取數(shù)據(jù)
},
以上這篇vue之封裝多個(gè)組件調(diào)用同一接口的案例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析
Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應(yīng)用場(chǎng)景和需求,watch?適合副作用操作,watchEffect適合簡(jiǎn)單的自動(dòng)副作用管理,computed?適合聲明式的派生狀態(tài)計(jì)算,本文通過(guò)場(chǎng)景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧2024-07-07
詳解Vue改變數(shù)組中對(duì)象的屬性不重新渲染View的解決方案
這篇文章主要介紹了詳解Vue改變數(shù)組中對(duì)象的屬性不重新渲染View的解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue 集成 storybook的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Vue.js結(jié)合Ueditor富文本編輯器的實(shí)例代碼
本篇文章主要介紹了Vue.js結(jié)合Ueditor的項(xiàng)目實(shí)例代碼，這里整理了詳細(xì)的代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了Vue2的diff算法規(guī)則原理詳解，diff?算法，就是通過(guò)比對(duì)新舊兩個(gè)虛擬節(jié)點(diǎn)不一樣的地方，針對(duì)那些不一樣的地方進(jìn)行新增或更新或刪除操作。接下來(lái)我們?cè)敿?xì)介紹節(jié)點(diǎn)更新的過(guò)程2022-06-06
Vue3中內(nèi)置組件Teleport的基本使用與典型案例
Teleport是一種能夠?qū)⑽覀兊哪０逡苿?dòng)到DOM中Vue app之外的其他位置的技術(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中內(nèi)置組件Teleport的基本使用與典型案例的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue3.0 vue-router4.0打包后頁(yè)面空白的解決方法
本文主要介紹了vue3.0 vue-router4.0打包后頁(yè)面空白的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式
這篇文章主要介紹了VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue 自定義指令自動(dòng)獲取文本框焦點(diǎn)的方法
今天小編就為大家分享一篇vue 自定義指令自動(dòng)獲取文本框焦點(diǎn)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
HTML頁(yè)面中使用Vue示例進(jìn)階（快速學(xué)會(huì)上手Vue）
Vue是用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架。特色：構(gòu)建用戶(hù)界面—數(shù)據(jù)變成界面；漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。VUE有兩種使用方式，一種實(shí)在html中直接使用vue做開(kāi)發(fā)，一種是企業(yè)級(jí)的單頁(yè)面應(yīng)用。2023-02-02