首先，我們需要了解 API 的基本概念。API（應(yīng)用程序編程接口）是一組由特定服務(wù)共享的規(guī)則，規(guī)定了應(yīng)用程序可以如何訪問服務(wù)、使用哪些命令以及服務(wù)可以返回哪些數(shù)據(jù)。API 充當(dāng)應(yīng)用程序與外部服務(wù)之間的橋梁。
REST API（表述性狀態(tài)轉(zhuǎn)移）是一種基于 HTTP 協(xié)議的 API，它通過特定的限制與 Web 服務(wù)進(jìn)行通信。以下是 REST API 的一些主要約束：
從 JavaScript 的角度來看，REST API 集成可以理解為通過某些庫與互聯(lián)網(wǎng)上特定地址的數(shù)據(jù)源進(jìn)行交互。
CRUD 是一個編程術(shù)語，代表四種基本的數(shù)據(jù)庫操作：創(chuàng)建（Create）、讀取（Read）、更新（Update）和刪除（Delete）。在 REST API 中，這些操作對應(yīng)于以下 HTTP 請求方法：
在使用 REST API 時，理解端點的概念至關(guān)重要。端點通常是一個特定的 URL 地址，例如 https://example.com/api/resource，通過該地址可以訪問特定的數(shù)據(jù)或功能。
為了更好地理解端點和 CRUD 操作，我們以 RapidAPI 提供的 JAAS API 為例。RapidAPI 是一個 API 集線器，允許開發(fā)者訪問數(shù)千種不同的 API。以下是 JAAS API 的 CRUD 操作示例：
以下是 JAAS API 的端點界面示例：
現(xiàn)在我們已經(jīng)了解了 REST API 的基本概念，接下來我們將學(xué)習(xí)如何使用 JavaScript 與 API 進(jìn)行交互。
API 密鑰是一個唯一的字符串，用于標(biāo)識用戶。在大多數(shù)情況下，您需要注冊 API 服務(wù)并獲取 API 密鑰。以 RapidAPI 為例，您可以通過郵箱、Google 或 GitHub 賬號快速注冊并獲取密鑰。
在獲取 API 密鑰后，您可以根據(jù) API 文檔的規(guī)則向端點發(fā)送請求，測試其是否正常工作。例如，使用 axios 庫可以快速創(chuàng)建 JavaScript 代碼片段，向端點發(fā)送請求并在瀏覽器控制臺中查看響應(yīng)。
通過 API 測試后，您可以開始構(gòu)建包含 API 調(diào)用的 JavaScript 應(yīng)用程序。
接下來，我們將創(chuàng)建一個簡單的 JavaScript 應(yīng)用程序，用于分析用戶評論的情緒。
項目包含以下三個文件：
HTML 文件用于顯示評論輸入框和分析按鈕：
評論情緒分析器
評論情緒分析器
樣式文件為頁面提供基本樣式：
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.main {
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
text-align: center;
}
.main-comment-area {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.main-analyze-button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.main-analyze-button:hover {
background-color: #0056b3;
}
.main-result-block {
margin-top: 20px;
}
.invisible {
display: none;
}JavaScript 文件包含 API 調(diào)用邏輯：
const API_URL = 'https://japerk-text-processing.p.rapidapi.com/sentiment/';
const REQUEST_HEADERS = {
'X-RapidAPI-Host': 'japerk-text-processing.p.rapidapi.com',
'X-RapidAPI-Key': 'YOUR_API_KEY',
'Content-Type': 'application/x-www-form-urlencoded',
};
const analyzeComment = (comment, callback) => {
const data = Qs.stringify({ text: comment, language: 'english' });
axios.post(API_URL, data, { headers: REQUEST_HEADERS })
.then(response => callback(response.data))
.catch(error => console.error(error));
};const displayResult = result => {
const resultBlock = document.getElementById('main-result-block');
resultBlock.classList.remove('invisible');
const resultElement = document.getElementById('result');
resultElement.textContent = result.label === 'pos' ? '正面評論！' :
result.label === 'neg' ? '負(fù)面評論！' : '中性評論！';
};const onAnalyzeButtonClick = () => {
const comment = document.getElementById('comment').value.trim();
if (!comment) {
alert('請輸入評論內(nèi)容！');
return;
}
analyzeComment(comment, displayResult);
};原文鏈接: https://rapidapi.com/blog/how-to-use-an-api-with-javascript/