## 引言

全國快遞物流查詢 API 是一種提供實時、準確、可靠的快遞物流資訊查詢服務的介面。它基於現有的物流資訊系統，透過API介面的方式，向使用者提供快遞物流資訊的查詢、跟蹤、統計等功能。使用全國快遞物流查詢 API，使用者可以在自己的應用程式或網站上，快速、方便地查詢快遞物流資訊。

本文從全國快遞物流查詢 API 的工作原理開始說起，給出包括 API 的應用場景、如何呼叫以及實際程式碼示例，供大家參考。

## 工作原理

全國快遞物流查詢 API 的工作原理比較簡單，透過請求第三方資料來源獲取最新的快遞物流資訊，再進行處理和解析，最終返回標準格式的資料給使用者，我們可以參考下圖的工作過程：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cfea397f5f3e47b980e71ee771245557~tplv-k3u1fbpfcp-zoom-1.image)

## 主要應用場景

全國快遞物流查詢 API 的應用場景廣泛，能夠幫助各個行業和場景中的使用者快速查詢、管理和分析快遞物流資訊，提高工作效率和服務質量。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2c2e1fba09a4b6ab8dc2fea1876fa1b~tplv-k3u1fbpfcp-zoom-1.image)

## 全國快遞物流 API 使用教程

> APISpace 是 國內一個較大的 API 供應平臺，提供多種型別的 API 介面，包括[手機號碼歸屬地查詢 API](https://www.apispace.com/eolink/api/teladress/introduction?utm_source=itpub&utm_content=high021&utm_term=shoujihaoguishudi) 、[天氣預報查詢API](https://www.apispace.com/eolink/api/456456/introduction?utm_source=itpub&utm_content=high021&utm_term=tqcx)、[手機在網狀態 API](https://www.apispace.com/eolink/api/zwsjmd/introduction?utm_source=itpub&utm_content=high021&utm_term=zaiwangzhuangtai) 、[反欺詐（羊毛盾）API ](https://www.apispace.com/eolink/api/wool/introduction?utm_source=itpub&utm_content=high021&utm_term=yangmaodun)以及當前比較熱門的[ AI 繪畫 API](https://www.apispace.com/23329/api/aigc/introduction?utm_source=itpub&utm_content=high021&utm_term=aigc) 等等，感興趣的小夥伴可以去官網體驗一下。

### 1.申請 API 金鑰

使用者需要在 API 提供商的官方網站進行註冊，並申請 API 金鑰，獲得 API 介面呼叫的許可權。

以 [APISpace ](https://www.apispace.com/eolink/api/wlgj1/introduction?utm_source=itpub&utm_content=high021&utm_term=qqwl)為例，使用全國快遞物流 API 的步驟通常如下：

進入[全國快遞物流 API 詳情頁](https://www.apispace.com/eolink/api/wlgj1/introduction?utm_source=itpub&utm_content=high021&utm_term=qqwl)，點選【免費試用】或者【註冊】都可以獲取 API 金鑰。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49a0baa18a944515a696c2a2ce8d29de~tplv-k3u1fbpfcp-zoom-1.image)

註冊成功後，我們在頁面導航選單點選 **【我的** **API**】進入 **【訪問控制**】頁面，即可看到平臺提供的金鑰。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50c4b6f6d2464125a48202ca2ccf7564~tplv-k3u1fbpfcp-zoom-1.image)

### 2.線上測試 API

點選免費試用成功後，系統會自動進入 API 的測試介面，如下圖，我們只需要填入快遞公司名稱以及單號就能獲取到完整的快遞軌跡資訊

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/700ece21f26243f19013ecb824ab5963~tplv-k3u1fbpfcp-zoom-1.image)

### 3.使用程式碼接入 API 介面 - JS 方式

```
var data = "{"cpCode":"YTO","mailNo":"YTO1111111111","tel":"13000000000或0000","orderType":"asc"}"

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
        console.log(this.responseText);
    }
});

xhr.open("POST", "https://eolink.o.apispace.com/wlgj1/paidtobuy_api/trace_search");
xhr.setRequestHeader("X-APISpace-Token","替換成平臺提供的 API");
xhr.setRequestHeader("Authorization-Type","apikey");
xhr.setRequestHeader("Content-Type","application/json");

xhr.send(data);
```

其他語言的接入可以點【[接入指南](https://www.apispace.com/eolink/api/wlgj1/guidence/?utm_source=itpub&utm_content=high021&utm_term=qqwl)】檢視，包括Java、微信小程式等多種示例語言都整理出來了。

### 4.物流軌跡資料展示

根據 API 返回的結果

```
{
    "traceId": "xxx",
    "trace_id": "xxx",
    "success": true,
    "logisticsTrace": {
        "theLastTime": "2023-04-13 13:33:17",
        "cpCode": "EMS",
        "cpUrl": "https://www.ems.com.cn/",
        "takeTime": "2天21小時27分",
        "logisticsStatusDesc": "已代收",
        "logisticsTraceDetailList": [{
            "areaCode": "xxx",
            "areaName": "天津,天津市,武清區",
            "subLogisticsStatus": "ACCEPT",
            "time": 1681113967000,
            "logisticsStatus": "ACCEPT",
            "desc": "【天津市武清區電商客戶攬投部】已收寄,攬投員:xxx,電話:185xxxxxxx4"
        }, {
            "areaCode": "CN120114000000",
            "areaName": "天津,天津市,武清區",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681124599000,
            "logisticsStatus": "TRANSPORT",
            "desc": "離開【天津市武清區電商客戶攬投部】,下一站【天津郵件處理中心包件車間】"
        }, {
            "areaCode": "CN120100000000",
            "areaName": "天津,天津市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681134781000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到達【天津郵件處理中心包件車間】"
        }, {
            "areaCode": "CN120100000000",
            "areaName": "天津,天津市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681141155000,
            "logisticsStatus": "TRANSPORT",
            "desc": "離開【天津郵件處理中心包件車間】,下一站【廣州市江高包件車間】"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "廣東省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681281085000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到達【xx車間】"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "廣東省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681297051000,
            "logisticsStatus": "TRANSPORT",
            "desc": "離開【xx車間】,下一站【xx車間】"
        }, {
            "areaCode": "CN442000000000",
            "areaName": "廣東省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681307392000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到達【xx車間】（經轉）"
        }, {
            "areaCode": "CN442000000000",
            "areaName": "廣東省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681318786000,
            "logisticsStatus": "TRANSPORT",
            "desc": "離開【xxx車間】,下一站【xxx處理車間】（經轉）"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "廣東省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681331119000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到達【xxx處理車間】"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "廣東省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681337879000,
            "logisticsStatus": "TRANSPORT",
            "desc": "離開【xxx處理車間】,下一站【xxx攬投部】"
        }, {
            "areaCode": "CN440113000000",
            "areaName": "廣東省,xx市,xx區",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681342169000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到達【xxxx投部】"
        }, {
            "areaCode": "CN440113000000",
            "courier": "xxx",
            "areaName": "廣東省,xx,xx區",
            "subLogisticsStatus": "DELIVERING",
            "courierPhone": "13xxxxxxxxx",
            "time": 1681352410000,
            "logisticsStatus": "DELIVERING",
            "desc": "【xxx攬投部】安排投遞,投遞員:xxx，電話:1xxxxxxxxxx,攬投部電話:0xx-xxxxxxx2"
        }, {
            "areaCode": "CN440100000000",
            "courier": "xxx",
            "areaName": "廣東省,xxx市",
            "subLogisticsStatus": "xxx",
            "courierPhone": "1xxxxxxxxx3",
            "time": 1681363997000,
            "logisticsStatus": "AGENT_SIGN",
            "desc": "已簽收,他人代收:xxxxx,投遞員:xxx,電話:1xxxxxxxxx"
        }],
        "mailNo": "9853491117528",
        "cpMobile": "xxx",
        "theLastMessage": "已簽收,他人代收:xxxxx,投遞員:xxx,電話:1xxxxxxxxx",
        "logisticsCompanyName": "EMS",
        "courier": "xxx",
        "courierPhone": "1xxxxxxxxxx",
        "logisticsStatus": "xxx"
    }
}
```

## 物流資訊展示程式碼示例( 原生JS + HTML + CSS)

下面的程式碼是手敲的，有錯誤歡迎評論區指正~

### Html

```
<div class="" id="logistics-trace"></div>
```

### Css

樣式覺得簡陋的話可以自行調整

```
<style>
    .logistics-trace {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
    .logistics-trace li {
      width: 180px;
      margin: 10px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      text-align: center;
      position: relative;
    }
    .logistics-trace li:after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ddd;
      background-color: #fff;
      position: absolute;
      top: -10px;
      left: calc(50% - 10px);
      z-index: 1;
    }
    .logistics-trace li:before {
      content: "";
      display: block;
      width: 2px;
      height: 100%;
      border-left: 1px solid #ddd;
      position: absolute;
      top: 10px;
      left: calc(50% - 1px);
      z-index: 1;
    }
    .logistics-trace li:first-child:before {
      display: none;
    }
    .logistics-trace li:last-child:after {
      display: none;
    }
    .logistics-time {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .logistics-status {
      font-size: 12px;
      margin-bottom: 5px;
    }
    .logistics-desc {
      font-size: 12px;
    }
    .logistics-status.accept {
      color: green;
    }
    .logistics-status.transport {
      color: blue;
    }
    .logistics-status.delivering {
      color: red;
    }
  </style>
```

### JS

使用 JS 對返回的物流資訊做處理

```
function generateLogisticsTrace(logisticsTraceData) {
      const logisticsTraceDetailList = logisticsTraceData.logisticsTrace.logisticsTraceDetailList;
      let logisticsTrace = '<ul>';
      logisticsTraceDetailList.forEach((logisticsTraceDetail, index) => {
        let logisticsStatus = '';
        let logisticsStatusDesc = '';
        let desc = logisticsTraceDetail.desc;
        let time = new Date(logisticsTraceDetail.time).toLocaleString();
        if (logisticsTraceDetail.subLogisticsStatus === 'ACCEPT') {
          logisticsStatus = 'accept';
          logisticsStatusDesc = '攬收';
        } else if (logisticsTraceDetail.subLogisticsStatus === 'TRANSPORT') {
          logisticsStatus = 'transport';
          logisticsStatusDesc = '運輸';
        } else if (logisticsTraceDetail.subLogisticsStatus === 'DELIVERING') {
          logisticsStatus = 'delivering';
          logisticsStatusDesc = '派送';
          desc = '【' + logisticsTraceDetail.areaName + '】' + logisticsTraceDetail.desc.replace('，', ',<br>投遞員：');
        }
        logisticsTrace += `
          <li class="${logisticsStatus}">
            <div class="logistics-time">${time}</div>
            <div class="logistics-status">${logisticsStatusDesc}</div>
            <div class="logistics-desc">${desc}</div>
          </li>
        `;
        if (index === logisticsTraceDetailList.length - 1) {
          logisticsTrace += '</ul>';
        }
      });
      return logisticsTrace;
    }
```

### 呼叫

```
 // xxx 請用上述返回的程式碼示例替換
 const logisticsTraceData = xxx
 const logisticsTrace = generateLogisticsTrace(logisticsTraceData);
 document.getElementById('logistics-trace').innerHTML = logisticsTrace;
```

原生JS + HTML + CSS 實現快遞物流資訊 API 的資料鏈式展示

相關文章