Taro跨端开发探索4——分布式中台下的接口访问

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

前言

在第9天的文章中，我们集成了tabBar实现了小程序入口的主要四个页面切换的效果，今天我们开始开发通用的request工具类来进行接口对接。本来在上一篇文章要讲一下如何使用apifox工具封装mock进行前端开发来着，但是使用apifox工具有点繁琐。我们这里直接使用已经编写好的后端demo接口吧。

需求分析

如题目所说，我们今天要实现的是项目可以访问分布式中台下的接口，我先介绍一下为什么要这样做。

• 接口的分布式部署
  我们的后端接口可能是分布式部署的，例如我们一开始只使用一个服务器，但是后期发现他的计算能力有限或者要用多个服务器来进行流量的负载均衡。此时，我们简单的做法是部署多个同样的服务副本，使用nginx进行负载均衡。这时，我们可以只讲某个服务（例如用户相关的服务）放在一个服务器上进行处理
  本篇文章主要是围绕如何解决这个情形来展开探讨的
• 微服务状态下的多入口
  其实，如果使用微服务引擎开发的话，我们在对接的时候和普通的前后端分离项目一样就行了，因为微服务项目有gateway,基于gateway可以分发到不同的serve上
• 多业务条线的场景 这里我以支付宝为例，他旗下有淘宝、饿了么等业务。假如我要开始一个新的搬家业务条线，给他起个名叫蚂蚁搬家，我在淘宝上新开一个入口，基于服务端渲染实现我的所有业务，放在底部的tabBar里作为流量入口进行访问。这时就需要我们的服务支持三个条线：淘宝、饿了么、蚂蚁搬家。我们也可以按照第一种情形来处理

实现多环境开发

我们在实现不同的接口访问之前，先要实现开发和生产多环境的配置（我们不可能在生产环境上进行接口对接)
我们在项目config下修改我们的dev.js和prod.js,在env配置中添加我们的接口配置，配置如下

  env: {
    NODE_ENV: '"production"',
    HOME_REQ_URL: '"http://localhost:4001/one"',
    CATEGORY_REQ_URL: '"http://localhost:4001/one"',
    SHOP_CART_REQ_URL: '"http://localhost:4010/ten"',
    USER_REQ_URL: '"http://localhost:4010/ten"',
  },

我们这里将四个入口分到对应到两个后端接口了
首页和分类页面对应 ip:401/one入口
购物车和个人中心对应 ip:4010/ten入口
具体的代码在我的gitee进行下载:gitee.com/liangminghu…
注意 对应的两个配置文件都要添加 我们修改完配置之后，先验证一下
我们修改home的index.tsx代码如下

import { Component } from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";
export default class Home extends Component {
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {
    console.log(process.env.HOME_REQ_URL);
  }

  componentDidHide() {}

  render() {
    return (
      <View className="home">
        <Text>首页</Text>
      </View>
    );
  }
}

注意 我们在这里修改了class的名称和view里的className为Home和home,防止样式会冲突，在以后开发到其他页面我们也顺带修改一下对应的类名和样式名
我们重新num run dev:weap运行一下
可以看到我们在didShow之后会打印首页的请求路径，多切换几次，正常打印代表我们已经读取到配置了\

编写通用的request请求封装类

我们在src下新建utils/request文件夹，新建index.ts文件，内容如下

import Taro from "@tarojs/taro";

function request(url, data, method): Promise<any> {
  return Taro.request({
    url,
    data,
    header: {
      "content-type": "application/json",
    },
    timeout: 10000,
    method: method,
    dataType: "json",
    success: function (res) {
      //todo codec处理
      return Promise.resolve(res.data);
    },
    fail: function (err) {
      //todo 异常处理
      console.log(err);
    },
  });
}
function get(url) {
  return request(url, null, "GET");
}

function post(url, data) {
  return request(url, data, "POST");
}
function del(url) {
  return request(url, null, "DELETE");
}
function put(url, data) {
  return request(url, data, "POST");
}
export { get, post, del, put };

封装各自的请求方法

我们在utils下新建api文件夹，然后创建以下几个文件夹及对应的index.ts文件

home对应的index.ts内容如下

import { get, post, put, del } from "../../request";
const homeReqUrl = `${process.env.HOME_REQ_URL}/index`;
export const testGet = () => get(homeReqUrl);
export const testPost = (data) => post(homeReqUrl, data);
export const testPut = (data) => put(homeReqUrl, data);
export const testDel = (id) => del(`${homeReqUrl}/${id}`);

我们试一下home页面调用接口

修改page/home/index.ts改为内容如下

import { Component } from "react";
import { View, Text } from "@tarojs/components";
import { testGet, testPost, testDel, testPut } from "../../utils/api/hmoe";
import "./index.scss";
export default class Home extends Component {
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {
    testGet().then((res) => {
      console.log(res);
    });
    testPost(null).then((res) => {
      console.log(res);
    });
    testDel('123123').then((res) => {
      console.log(res);
    });
    testPut(null).then((res) => {
      console.log(res);
    });
  }

  componentDidHide() {}

  render() {
    return (
      <View className="home">
        <Text>首页</Text>
      </View>
    );
  }
}

我们可以在控制台中看到以下输出

在开始调用接口之前需要打开微信开发者工具的这个配置，否则本地域名无法访问

修改其他几个入口的api接口路径和对应的index.ts

此处我们就只需要修改api里的基本目录与pages/对应入口下的index.ts的class名和样式名称即可，可以访问我的gitee查看修改了哪些:gitee.com/liangminghu…

最终验证

我们最终的效果就是访问首页和分类对应的控制台输出4001相关的信息，访问4010控制台输出的是4010的信息

结语

本篇文章我们完成了同一个项目访问不同的业务中台的实现，大家如果有不明确的代码或者没有实现最后的效果，可以down一下我的代码对比一下，下一篇文章我准备处理异常码和实现登录设置用户信息等操作，欢迎关注点赞