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 NaN和Infinity特殊值 [译]
Sep 20 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
js实现简单的秒表
Jan 16 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
php5 mysql分页实例代码
2008/04/10 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
js window.event对象详尽解析
2009/02/17 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python 26进制计算实现方法
2015/05/28 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
网络教育自我鉴定
2013/11/01 职场文书
董事长岗位职责
2013/11/30 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
党员公开承诺事项
2014/03/25 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书