TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 五、《API服务设计》

一、前言

在实际业务开发中，会遇到这样一种需求，使用VUE的页面需要支持SEO，同时对首屏有指标性要求，目前市面上普遍使用的是Nuxt.js解决方案，在引入的同时还需要考虑与现有的全栈工程结合，本系列文章探讨的是此类全栈工程的解决方案，同时使用的是TypeScript应用于前后端编程，文章中介绍的工程与技术要点源码已上传至Github，有需要的朋友可自行下载：
Nuxt.js和Nest.js同构工程

文章意在抛砖引玉，前后端使用同一种语言TypeScript编写，示例已包含基本接口请求，数据库连接应用，公用模块封装等实际开发中使用到的内容。

效果预览:

以下为该系列文章入口列表:
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 一、《简介》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 二、《框架融合》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 三、《配置服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 四、《UI系统》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 五、《API服务设计》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 六、《SEO功能实现》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 七、《Vuex使用》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 八、《接入Mongo DB服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 九、《TypeScript》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 十、《工程化部署》

示例中的远程服务调用系统采用直连和服务端中转2种方式进行，在实际业务开发中，跨域情况比较常见，在现今前后端各司其职情况下，引入Nest.js服务，一般前端能自行解决。跨域方法类型这里不作缀述。主要有:
1.NGINX设置
2.服务端开放
3.其它
这里讨论的是Nest.js中转的方式进行，一般来讲，如果API不需要跨域，则只需要前端直接发起请求即可。但如果API是跨域，在这里示例中使用的是Nest.js中转的方式进行，同时使用中转也能统一请求出口入口，鉴权，请求参数监控和日志监控等的统一处理。本示例中使用到的服务远程调用主要围绕axios组件使用展开。

二、前端API服务基类实现(axios封装)

在nuxt.config.ts配置中导出全局引用

在插件实现类中定义拦截和响应逻辑。

三、服务端API服务基类实现(axios封装)

服务端则通过中间件形式，引入axios，注册拦截器，charles抓包代理，原理同客户端实现大同小异。

四、服务端中转服务实现(RESTful)

与客户端axios实现区别是，因为作了服务端中转，所以需要重写实现所有RESTful系列方法。

五、调用举例

• 非中转服务调用举例

  

  

• 中转服务调用举例

  

  

  

  建立中转专用模块:

  

  中转模块服务继承自ServiceTransport实现：

  

  对外暴露controller服务,通过/api/trasport/getTransportData方式访问：

  

  注册模块：

  

  从截图可以比较看出，中转与非中转服务调用，对客户端来说区别不大，主要取决于Service类继承的类是否为TransportService，而TransportService则又继承自BaseService只不过是重写了底层实现。
  

六、子类服务实现，按域名分类复用思想

客户端远程服务调用，建议以调用域名区分，同一域名服务下接口请求都归类到同一文件中，进行代码复用，例如：

示例中，当cart和goods页面都同时需要调用goods接口的时候，这里将接口封装在一个Service类中，对于每个业务页面来说，只需要进行类的导入，然后是接口调用，达到复用目的。