mpvue 开发小程序接口数据统一管理

Posted 2020-11-09 Blog - Liang Fengbo

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的写法与同步写起来很相似，写起代码来也整洁，易理解。建议大家在不同的场景下使用它们的各自优缺点。