vue之封装多个组件调用同一接口的案例

这篇文章主要介绍了vue之封装多个组件调用同一接口的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧背

这篇文章主要介绍了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之封装多个组件调用同一接口的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/7099.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注