mpvue 開發小程序接口數據統一管理

mpvue項目裏作API與數據分離統一管理

小程序裏請求數據接口使用wx:request，由於考慮項目比較大，最好把wx:request封裝起來，統一使用管理

utils.js 配置開發環境和線上環境接口

let util = {};

const ajaxUrl = process.env.NODE_ENV === 'development'
  // 測試接口地址
  ? 'code.net.cn/api'
  // 線上接口地址
  : 'https://api.code.net.cn';


util.API = ajaxUrl;
util.oauthUrl = ajaxUrl;

export default util;

fetch.js 暴露封裝請求接口方法

import utils from '../utils/utils'
import store from '../vuex/index'

export async function request(obj) {

  let token = store.state.wechat.token;

  return new Promise((resolve, reject) => {
    // 是否顯示loading
    if (obj.dontLoading !== true) {
      wx.showNavigationBarLoading();
      wx.showLoading({
        mask: true,
        title: '處理中'
      });
    }

    wx.request({
      url: utils.API + obj.url,
      data: obj.data,
      header: {
        'content-type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + token,
        ...obj.header
      },
      method: obj.method,

      success(res) {

        // 處理返回信息
        handleResult(res);

        // 處理 new token
        handleNewToken(res);

        if (obj.dontLoading !== true && store.state.showing !== true) {
          wx.hideLoading();
          wx.hideNavigationBarLoading();
        }

        store.commit('setShowing', false);

        resolve(res.data.data)
      },

      fail(e) {

        reject(e)
      }

    })
  })
}

// 處理new token
function handleNewToken(res) {
  let new_token = res.header['New-Token'];
  if (new_token) {
    store.commit('setToken', new_token)
  }
}

// 統一顯示toast
function showToast(message) {
  wx.showToast({
    title: message,
    icon: 'none',
    duration: 2000
  });

  store.commit('setShowing', true);
}
/**
 * 處理code信息
 * @param res
 */
function handleResult(res) {

  let code = res.data.code;
  switch (code) {
    case 200:
      break;
    case 401 :
      showToast("身份校驗信息失敗，請刷新頁面重試！");
      store.dispatch('getUserToken');
      break;

    case 412 :
      showToast('未填寫我的信息！');
      wx.navigateTo({url: '../bind/main'});
      break;

    case 422 :
      let errors = '';
      for (var key in res.data.errors) {
        res.data.errors[key].forEach((item) => {
          errors += item + " "
        })
      }
      errors = errors ? errors : '提交的信息錯誤，請檢查！';
      showToast(errors);
      break;

    default:
      let msg = res.data.message ? res.data.message : '未知錯誤，請重試！';
      showToast(msg);
  }
}

統一在vuex裏面作數據請求接口

好比訂單接口

import {request} from "../../api/fetch";

const state = {
  // 訂單列表
  orderList: [],
}

const mutations = {
  setOrderList(state, data) {
    state.orderList = data;
  }
}

const actions = {
  /**
   * 下訂單
   * @param commit
   * @param params
   * @returns {Promise<*>}
   */
  async createOrder({commit}, params) {
    const res = await request({
      method: 'post',
      url: '/wechat/order',
      data: params,
    });
    return res;
  },

  /**
   * 獲取訂單詳情
   * @param commit
   * @param id 訂單id
   * @returns {Promise<*>}
   */
  async getOrderDetail({commit}, id) {
    const res = await request({
      method: 'get',
      url: '/wechat/order/' + id,
      data: {}
    })
    return res;
  },

  /**
   * 獲取訂單列表
   * @param commit
   * @returns {Promise<*>}
   */
  async getOrderList({commit}) {
    const res = await request({
      method: 'get',
      url: '/wechat/order',
      data: {}
    })
    commit('setOrderList', res);
    return res;
  }
}

export default {
  state,
  actions,
  mutations
}

如今已經接口API與請求數據分開統一處理，在頁面僅僅須要調用就能夠使用數據了

<script>
  import {mapActions, mapState} from 'vuex';

  export default {

    computed: {
      ...mapState({
        orderList: state => state.order.orderList,
      }),

    },
    async onShow() {
    
      // 調用請求獲取訂單列表接口
      await this.getOrderList();
    },
    methods: {
      ...mapActions([
        'getOrderList',
      ]),
    }
  }

</script>

在這稍微說一下我的觀點，async/await和Promise異步，我此次項目有同時使用promise和async/await，兩個有不一樣的優缺點，Promise的回調機制async/await好，缺點就是寫不少then回調，async/await的寫法與同步寫起來很類似，寫起代碼來也整潔，易理解。建議你們在不一樣的場景下使用它們的各自優缺點。