溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue中如何封裝多個(gè)組件調(diào)用同一接口

發(fā)布時(shí)間：2020-08-12 14:04:48 來源：億速云 閱讀：344 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹了vue中如何封裝多個(gè)組件調(diào)用同一接口，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

背景：項(xiàng)目中有多個(gè)組件調(diào)用同一接口，為提高代碼可維護(hù)性，需要封裝公共方法

直接return 接口調(diào)用的結(jié)果

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基礎(chǔ) 進(jìn)行封裝的，是一個(gè)異步的方法，所以在組件中調(diào)用getAll()方法，拿到的是一個(gè)空數(shù)組

使用promise進(jìn)行封裝

   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);
  });
 }
 // 調(diào)用
 getAll()
  .then(data => {
  console.log(data); // 
  })
  .catch(err => {
  this.tipInfo(err.data.desc, '提示', false, 'warning');
  });

使用promise進(jìn)行封裝后，方法，不夠簡潔，達(dá)不到優(yōu)化的目的

使用回調(diào)函數(shù)進(jìn)行封裝

  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);
 }
  // 調(diào)用
  getAllPark(data => {
   console.log(data); // 成功拿到數(shù)據(jù)
  });

補(bǔ)充知識：vue多個(gè)頁面用到同一個(gè)接口的數(shù)據(jù)（ 比如名稱列表 ），使用 vuex

第一種： 調(diào)接口不傳參數(shù)

1、在 store文件夾下的 modules文件夾下新建 getName.js

// getName.js
import { getNameList } from "@/apis/apis";  // 導(dǎo)入接口

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、在整個(gè)項(xiàng)目剛開始加載的時(shí)候就是用 dispatch 分發(fā)，這樣就不管在哪個(gè)頁面需要使用到都可以使用

比如打開頁面首頁的時(shí)候，在mounted里面就 dispatch 觸發(fā)geName函數(shù)

<script>
export default {
 mounted() {
  this.$store.dispatch('geName')
 },
}

4、如在多個(gè)頁面都需要使用 nameList ， 以在某一個(gè)頁面使用為例，其余頁面一樣用法

<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>

第二種： 調(diào)接口傳參數(shù)

import movieService from '../services/movieService.js'

export default {
  namespaced: true,
  state: {
    current: 1,
    pageSize: 2,
    total: 0,
    datas: [],
    isLoading: false
  },
  mutations: { //改變狀態(tài)的通用方法  設(shè)置整個(gè)狀態(tài)
    setState(state, newState) {
      for (const prop in newState) {
        state[prop] = newState[prop]
      }
    }
  },
  actions: {
    fetch(context) { // 根據(jù)當(dāng)前的分頁設(shè)置，獲取電影
      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) //返回分頁的電影數(shù)據(jù)
    }
  },
  //通過id獲取電影數(shù)據(jù)
  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() { //遠(yuǎn)程獲取數(shù)據(jù)
    this.$store.dispatch("movie/fetch") //出發(fā)vuex中movie.js里的action，獲取數(shù)據(jù)
 },

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue中如何封裝多個(gè)組件調(diào)用同一接口內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手