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

最新推荐文章于 2022-06-19 17:19:35 发布

原创

最新推荐文章于 2022-06-19 17:19:35 发布 · 6.1k 阅读

6 ·

CC 4.0 BY-SA版权

原文https://github.com/liangfengbo/frontend/issues

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,