RESTful API 的整合 —— 如何将 API 整合在一起-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代 Web 应用程序的设计和开发中， RESTful API 是不可避免的一部分。RESTful API 可以使得前端和后端分离，从而实现对系统的松散耦合，提高了系统的拓展性和可维护性。然而，在实际应用过程中，有时会存在各类第三方 API 和自有 API 的搭配使用。本文将介绍如何将多个 API 整合起来，实现两个 API 的交互及穿透调用。况且，本文不仅仅是围绕开发者阅读的一本入门手册，我们还将提供详尽的例子和最佳实践，助你顺利完成 RESTful API 的整合。

RESTful API 简介

RESTful API 是基于 HTTP 协议的 API，其建立在客户端和服务器之间传输数据的协议上。在 RESTful API 中，对资源的操作，对应着对 URL 上资源 ID 操作的 CRUD 操作。比如对于文章资源，其请求方式和指令如下：

获取文章列表：GET /articles
获取单篇文章：GET /articles/:id
创建新文章：POST /articles
编辑文章：PUT /articles/:id
删除文章：DELETE /articles/:id

在 RESTful API 中，再也不用每个 API 都单独组织 URL，避免了 URL 重叠的困扰。同时，RESTful API 不仅仅是简化了我们的请求方式，它更是整合了多个服务之间的请求与响应接口。

在实际开发中，经常会出现多个 API 的通过调用实现功能需求，而多个 API 的整合是无法避免的。这里我们讨论两个部分的整合：API 的交互；API 的穿透调用。

API 之间的交互

API 之间的交互，在实际过程中分为同步和异步两种方式。异步方式一般通过消息队列等方式，而如此做往往较为繁琐，常常会出现 API 不一致，难以维护的情况。同步方式则是一种较为理想的API交互方式。

实际操作

我们通过两个题材性质截然不同的 API 为例讲解其如何描述 API 之间的交互逻辑，SPAM 识别 API 和资讯推荐 API 的设计思路。下面，我们以 JSON 格式举例说明。

SPAM 识别 API（以调用健康咨询回答的接口为例）

{
    "data": {
        "id": 12345,
        "article_id": 23456,
        "score": 97,
        "status": "spam"
    }
}

id：评论 ID
article_id：文章 ID
score：SPAM 识别的分数
status：SPAM 状态，值为 ok 或 spam

资讯推荐 API（以使用学科分类进行推荐的接口为例）

// javascriptcn.com 代码示例
{
    "data": [
        {
            "id": 1,
            "title": "医疗创新",
            "category": "medical",
            "image": "/images/1.png"
        },
        {
            "id": 2,
            "title": "商业洞察",
            "category": "business",
            "image": "/images/2.png"
        },
        {
            "id": 3,
            "title": "数字科技",
            "category": "tech",
            "image": "/images/3.png"
        }
    ]
}

id：资讯 ID
title：资讯标题
category：资讯学科分类
image：资讯图片链接

为了更好地整合这两个 API，我们需要先对它们进行分类和拓扑映射。具体可以使用数据跟踪或者图结构等方式，将需要的数据进行结构化支持。

以在一篇文章下面插入资讯推荐为例，调用 SPAM 识别 API 过滤 SPAM 后，再使用资讯推荐 API 查询文章的学科分类，选择相应类别的资讯提供给用户。

另外，为了在 restful 接口中实现多个 API 的交互，一种比较好的方式是使用分布式事务，确保在需要加事务的地方一定保证其一致性。

API 的穿透调用

API 的穿透调用是一种在后端中实现 API 的调用，具有降低前端压力的特点。在用户的请求中，对前端的影响相对较小，这也是为什么它如此流行的原因。

实际操作

我们使用 axios 作为后端 API 框架，为数据的请求和响应提供支持，使得对 API 的穿透调用能够实现。

在实际过程中，我们使用 axios 在服务的中间层中进行穿透调用。通过以下方式，将所有需要调用的接口参数和参数值直接放到配置文件中，请求和响应数据的处理都交给了 axios 这个工具来实现。这个过程比较简单，只需要做以下几个步骤：

安装 axios： npm install --save axios
创建一个 axios 的实例
发送请求

// javascriptcn.com 代码示例
// 创建 axios 实例
const request = axios.create({
    baseURL: 'https://xxx.com/api',
    timeout: 5000
});

// 发送请求
request({
    url: '/comments?articleId=123',
    method: 'get',
    params: {
        id: 1,
        content: 'xxx'
    }
}).then(res => {
    console.log(res.data);
}).catch(err => {
    console.log(err);
});

在上述代码中，我们通过 axios 创建了一个实例 request，设定了基础 URL 地址和超时时间（每个 API 都是不同的，需要设置不同的基础 URL）；然后，我们发送了一个 GET 请求，它调用了接口 comments 并附带上参数 articleId，它还传了参数 id 和 content。请求完成后，我们将得到一个 Promise 实例，它含有响应结果，我们可以直接使用 res.data。

为了让穿透调用充分发挥作用，在前端调试 API 的时候，可以先对 API 进行实现好的封装，这样在进行调试的时候更简单方便。以 SPAM 检测、资讯推荐 2 个 API 为例，我们定义了如下的 API 封装类：

// javascriptcn.com 代码示例
// api.js
import request from './request'

const api = {}

api.checkSpam = async content => {
    try {
        const config = {
            url: '/spamCheck',
            method: 'post',
            data: {
                content,
            },
        }
        const result = await request(config)

        if (result.data.status === 'ok') {
            return true
        }
        if (result.data.status === 'spam') {
            return false
        }

        return true
    } catch (e) {
        console.error(e)
        return false
    }
}

api.recommendNews = async articleId => {
    try {
        const config = {
            url: '/show',
            method: 'get',
            params: {
                articleId,
            },
        }
        const result = await request(config)
        return result.data.data
    } catch (e) {
        console.error(e)
        return []
    }
}

export default api

我们在 API 的封装类中定义了 checkSpam 和 recommendNews 函数分别用来检验评论是否是 SPAM，以及获取推荐的资讯。在这个 API 封装类中，我们需要导入前面我们创建的 axios 实例，然后在 checkSpam 和 recommendNews 中使用 axios 发送请求。对于请求的参数，我们放在了一个配置对象 config 中，并根据 API 接口的不同，配置了不同的请求方式和参数。

总结

本文主题围绕 RESTful API 的整合，分析了 API 之间交互和穿透调用和如何实现。让我们更好地理解 RESTful API 的工作原理和交互过程，并且掌握如何在具体场景中运用 RESTful API 实现数据通信。同时，本文还分享了实用的技巧和案例，帮助读者更好地掌握 RESTful API 的整合。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6545b3157d4982a6ebf50d03