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


Posted in Javascript onAugust 11, 2020

背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法

直接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之封装多个组件调用同一接口的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
vue接口请求加密实例
Aug 11 #Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 #Javascript
vue npm install 安装某个指定的版本操作
Aug 11 #Javascript
小程序自动化测试的示例代码
Aug 11 #Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 #Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 #Javascript
Vue自定义全局弹窗组件操作
Aug 11 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
vue中mint-ui的使用方法
2018/04/04 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python排序算法实例代码
2017/08/10 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python 标准差计算的实现(std)
2019/07/29 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
会计职业生涯规划书
2014/01/13 职场文书
建筑工地宣传标语
2014/06/18 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
办公室禁烟通知
2015/04/23 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技