白話科普，10s 瞭解 API

時間 2020-11-10

標籤 javascript html java ios ajax 編程 axios api 跨域瀏覽器欄目 JavaScript 简体版

原文原文鏈接

做爲一名又拍雲的技術支持工程師，小拍天天都會接收到不少客戶的提問。這其中，有不少客戶會問：「小拍，請問雲存儲上傳除了使用控制檯的文件管理和 FTP 工具以外，有沒有其餘的途徑進行上傳呢？」javascript

「有噠，您能夠調用 API 接口來進行上傳哦。」html

「請問，什麼是 API 接口呢？我要怎麼調用呢？」java

彆着急，這就爲您介紹 API 接口。ios

什麼是 API 接口

首先，咱們先來看一看 API 接口的定義：ajax

API（Application Programming Interface,應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工做機制的細節。編程

從定義中，咱們先劃下重點：函數、提供應用程序與開發人員、無需訪問源碼、例程 。其中，例程是某個系統對外提供的功能接口或服務的集合。axios

看完這個定義是否是感受本身看了個寂寞，這解釋跟不解釋沒有差異啊？好啦，不要擔憂，小拍來給你們直接了當的說一說。api

API 其實能夠理解爲是接收要求的信差，經過 API 接口，咱們告訴系統（例程）想要作什麼，系統再把處理結果響應回來。跨域

若是用一個現實生活中的場景來舉例說明，那麼餐廳的服務員其實就是一個典型的 API 。想象一下你正坐在餐桌前，面前桌子上有一張點菜用的菜單，點好菜後，交由廚房進行處理。但如今少了一個關鍵的連接點，如何把咱們的單子送到廚房，再把食物送到個人桌上呢？瀏覽器

這就是服務員（API）登場的時候了。服務員就是這個信差，他會傳遞你的要求或者餐點，把這些信息告訴廚房（系統），廚房就會知道怎麼作，而後把餐品經過服務員端（響應）給你。

如今咱們把這個原理應用到真正的 API 例子上來。

快遞單號查詢，這你們應該很熟悉吧。朋友經過順豐寄了一箱零食給你，並告知你了快遞單號，你就能夠在順豐的官網上，輸入快遞單號進行查詢。順豐的系統接收到查詢，就會在系統中查找對應快遞的信息，響應給你。

可是，不少時候咱們並非直接經過快遞公司的網站去查詢快遞信息的。比方說經過淘寶買的衣服，賣家經過順豐發貨，但咱們能夠在淘寶上查詢到順豐快遞的信息。那麼淘寶是怎麼獲取到存放在順豐服務器上的快遞數據呢？

沒錯，這裏就是使用了 API 。淘寶能夠經過順豐提供的 API 接口，來獲取存放在順豐服務器上的快遞信息，最後顯示在咱們面前。

如今再看上邊的定義，是否是感受好理解一些了呢？API 接口就是預先定義好的函數邏輯，提供給其餘系統請求，而後返回結果的一個東西。

爲何要使用 API 接口

在知道了 API 接口的做用後，使用 API 接口的緣由也就一目瞭然了。舉個例子：你打算開發一個打車軟件，須要在頁面上展示地圖，那你會怎麼作呢？

若是說本身來開發地圖，開發時間就會大大延長，成本也會增長許多。這個時候，其實能夠在高德開放平臺或者百度地圖的開放平臺，找到地圖 API，購買他們的服務，部署調用相關的 API ，這樣就能夠快速在咱們軟件中上線地圖功能了。

因此，對於軟件提供商來講，開放 API 並讓別的應用程序來調用，造成生態，軟件才能發揮最大的價值，才能更有生命力，同時別人也看不見代碼，不會傷害商業機密。

對於應用開發者來講，有了開放的 API ，就能夠直接調用多家公司作好的功能來作本身的應用，不須要全部的事情都本身操刀，節省精力。

如何使用 API 接口

如今市面上開放的 API 接口，通常都是經過 HTTP 請求調用的。例如，一些第三方提供的查詢天氣的功能，咱們就能夠根據第三方提供的 API 地址以及相關的說明文檔，攜帶上請求參數，在瀏覽器中直接訪問使用。

接下來，小拍以又拍雲存儲上傳 API 爲例，經過 curl 工具來完成一個向雲存儲上傳文件的操做。接下來會涉及到一些命令行工具以及代碼的操做，若是你對 curl 這個工具不太熟悉的話，也能夠參考小拍以前的文章《雙劍合璧-掌握 curl 和 Dig 走天涯》哦。

每一個 API 接口根據做用不一樣，須要傳遞的參數也是不盡相同的。所以，咱們在使用一個 API 接口以前，最好先看一下官方文檔的 API 說明。

經過文檔介紹，咱們能夠看到若是須要請求雲存儲的上傳接口，咱們須要使用 PUT 的方式，向 http://v0.api.upyun.com 發起請求。其中存儲服務名和文件的保存路徑定義在請求地址中。而且須要攜帶 Authorization 鑑權請求頭，來確保 API 的調用是合法的。

Authorization 的生成，小拍使用最簡單的基本認證來進行演示。

根據鑑權文檔介紹，curl 支持直接傳入操做員名和密碼來生成鑑權請求頭。

瞭解 API 接口調用的規則以後，咱們就能夠開始準備數據，來向雲存儲空間上傳文件啦。

例如，小拍的桌面上有一張圖片，小拍想把圖片上傳到本身雲存儲空間下的 images 目錄下，保存名爲 lufei.jpg。

小拍的雲存儲空間名爲 fileupload-upyun，操做員名爲 hello，對應的密碼爲 dF4XhRbnpsvonU1dgdetURncHSwa2Z37，這樣，咱們就有調用上傳 API 的必要參數了。

接下來，咱們就按照要求，組裝 curl 的請求命令。

curl -X PUT \
http://v0.api.upyun.com/fileupload-upyun/api/lufei.jpg \
-u hello:dF4XhRbnpsvonU1dgdetURncHSwa2Z37 \
-T C:\Users\hilih\Desktop\test.jpg

參數說明：

-X 能夠指定 curl 發起請求的方法

-u 對傳入的數據進行 HTTP 基本認證，也就是用戶和密碼組和的base64編碼

-T 可使 curl 讀取指定路徑下的文件

這樣呢，咱們就成功的調用了雲存儲的上傳 API 接口，經過接口上傳了一張本地的圖片到存儲空間中。

不過，使用 curl 發起 HTTP 請求，看上去總有一些麻煩，命令行也太反人類了吧，有沒有更加友好的界面呢？當時啦，使用 curl 只是其中一種的上傳方法，咱們還能夠經過其它方式，來向雲存儲 API 發起 HTTP 請求。

例如二狗子的網站分享圖片，二狗子就對上傳的 API 作了處理，用網頁的形式對他的用戶提供了一個上傳的 API 接口。小拍也聯繫了二狗子，請他提供了一個簡單的測試用例。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雲存儲上傳</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
</head>
<body>
上傳服務空間：<input id='bucketname'>
操做員帳號：<input id='username'>
操做員密碼：<input id='password'>
存儲路徑：<input id='path'>
文件選擇：<input id='fileupload' type='file' name='file' /><br><br>
<button>上傳</button>
<script type="text/javascript">
window.onload = function() {
document.querySelector('button').onclick = ufload;
}
function ufload() {
var bucket = document.querySelector('#bucketname').value;
var username = document.querySelector('#username').value;
var password = document.querySelector('#password').value;
var path = document.querySelector('#path').value;
var input = document.querySelector('#fileupload');
var file = input.files[0];
axios.defaults.baseURL = 'http://v0.api.upyun.com';
axios.put('/' + bucket + path, file, {
auth: {
username: username,
password: password
}
}).then(function(response) {
console.log(response.data);
console.log(response.headers);
console.log(response.status);
if (response.status == 200) {
alert('上傳成功');
}
})
}
</script>
</body>
</html>

也歡迎你使用熟悉的編程語言，來嘗試調用 API 上傳接口呀。

白話科普，10s 瞭解 API

什麼是 API 接口

爲何要使用 API 接口

如何使用 API 接口

推薦閱讀