抖店微应用Mona框架request的简易封装

前言

因为本人在研发电商客服机器人的公司实习，有客户需要在抖店应用中使用相关的应用，遂让我将浏览器的应用适配到抖店微应用框架中。而在微应用中必须使用抖店提供的Mona框架提供的request请求才能发送请求，使用其他请求，例如fetch、axios等都会被抖店拦截。所以这篇文章就是用来说明在进行抖店微应用开发时，如何封装测服和本地的请求。

本地开发

在本地开发时，不能直接使用Mona框架的request来进行网络请求，因为它会向抖店发送getToken请求，其中需要appId作参数，而在本地即使在mona.config.ts中配置了appId它也拿不到，所以会导致请求报错。 就像这样。所以在本地调试时，我们需要使用其他的请求来模拟Mona框架中的request，前提是后端也得是本地的，不能直接使用测服的后端！！！
我这里使用的是axios，具体代码为

function requestWithPromise<T>(url: string, options?: RequestOptions): Promise<T> {  
  options.appId = 7311380;
  options.authId = "9993";
  options.authSubjectType = "";
  options.method = url;
  options.userId = 4422386;
  options.subUserId = 7398;
  options.data = JSON.stringify({data: options?.data});
  options.userType = 1
  return new Promise((resolve, reject) => {
    axios.post('这里是本地的后端地址', options).then(res => {
      const { code } = res.data || {};
      if(code === 0) {
        if(options?.autoHump) {
          res.data.data = json.hump(res.data.data);
        }
        resolve(res.data as T); 
      }
    }).catch(error => {
      console.log(error);
      reject(error)
    })
  })
}

const mRequest = async function(url: string, options?: RequestOptions): Promise<ResponseData<any>> {
  try {
    if (options?.autoHump) {
      options.data = json.underline(options.data)
    }
    const res = requestWithPromise<ResponseData<any>>(url, options);    
    return res;
  } catch (error) {
    throw new Error(error.message)
  }

代码中的options.appId等都是为了模拟Mona框架的request请求，这个请求在微应用中会自动添加这些数据，具体数据可以在后端查看。至于在axios外面又写了一层Promise是因为request请求返回的数据并不是Promise，为了它才写了一层，就懒得删了。autoHump是调用请求时参入的一个参数，用来判断数据需不需要格式化，没有相关需求可以不添加。
使用mRequest照常调用即可。

import request, { ResponseData } from '@/utils/request'
import { ShopList } from '@/typings/shop'

export async function fetchGoodList(params) {
  return request('/dialog/focus_goods_list', {
    method: 'post',
    data: params
  })
}

测服开发

测服开发就必须使用Mona提供的request请求，不过在知道了后端返回数据类型后还是很简单的。

function requestWithPromise<T>(url: string, options?: RequestOptions): Promise<T> {  
  return new Promise((resolve, reject) => {
    request({
      fn: url, // 接口名
      data: {
        ...options?.data,
      }, // 入参， 会序列化
      success: (data) => {
        const { code } = data.data || {};
        if (code === 0 && options?.autoHump) {
          data.data.data = json.hump(data.data.data)
        }
        resolve(data.data as T); 
      }, // 成功回调
      fail: err => {
        reject(new Error(err.errMsg));
      }, // 失败回调
    })
  })
}

因为在微应用的request中，返回的response status始终都是200，所以没有判断的必要。直接判断返回的data中的code就行。
这个request在微应用中会封装其他很多的东西，最后发送的数据大致是这样的：

吐槽

最开始本地开发时，想的是按照抖店开放平台文档中心中的微应用前后端本地调试指南来实现，但是按着弄了后使用request仍然发送tokenForApp失败，所以最后才模拟接口实现。
不得不说抖店开发提供的Mona框架的文档真的辣鸡，很多东西都没有例子，网上的论坛也很少😭而且项目中的less文件想要模块化引入只能使用xxx.module.less命名，想着使用chain修改 webpack 配置结果项目里自带的css-loader一直报错，修改版本问题就更多了😨，字节什么时候更新文档啊！！！😵‍💫
而且这套框架明明是个小程序的框架，还拿到PC里当微应用放到抽屉里面用，真离谱。