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，获取数据
},

来源：https://blog.csdn.net/hbjiankely/article/details/87924295