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 相关文章推荐
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
js中substring和substr的定义和用法
May 05 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
基于JQUERY的多级联动代码
2012/01/24 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python轻松查到删除自己的微信好友
2016/01/10 Python
python中requests和https使用简单示例
2018/01/18 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python解析含有重复key的json方法
2019/01/22 Python
python挖矿算力测试程序详解
2019/07/03 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
Python偏函数实现原理及应用
2020/11/20 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
节能环保标语
2014/06/12 职场文书
办护照工作证明
2014/10/01 职场文书
师范生见习报告范文
2014/11/03 职场文书
2015年公司工作总结
2015/04/25 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang
Python可视化神器pyecharts绘制水球图
2022/07/07 Python