HTTP/HTTPS 協議

HTTP 實際上是個縮寫，英文全稱是：Hyper Text Transfer Protocol （超文本傳輸協議）。

最常用的網頁（也叫web頁）就是一種超文本的具體表現形式。HTTPS （全稱：Hyper Text Transfer Protocol over SecureSocket Layer）協議是安全的，地址是經過了身份認證的，傳輸的數據經過了加密。

url

地址欄輸入的地址，叫作?URL,也就是我們常說的網址.

• 協議類型與域名之間以?://（固定寫法）分隔。
• 路徑（英文常稱為?path）以單斜杠?/?開頭，中間每層的分隔符也是單斜杠?/?。
  • 路徑相當于一層一層的文件夾。但要注意與 windows 的文件夾分隔符?\?不要混淆了。
• 參數：
  • 路徑與參數之間用???分隔。看到問號???就知道后面的內容就是參數了。
  • 多個參數之間用?&?分隔。
  • 參數用“參數名=參數值”（key=value）的格式表示。

https://www.douban.com:443/gallery/topic/116390/?from=hot_topic_note&sort=new

域名后的?:443?表示網站的端口號。HTTP?協議默認的端口號是?80?，HTTPS?協議默認的端口號是?443?。默認的端口號在 URL 中是可以省略的，其它的端口號就必須要寫明了。

路徑的兩種情況

1.相對路徑

gallery/topic/116390/?from=hot_topic_note&sort=new

不是以斜杠?/?開頭的路徑，表示相對路徑，

2.默認路徑

沒有輸入路徑時，表示請求網站的默認頁面.

API+GET請求

API

API 全稱 Application Programming Interface，應用程序接口，API 一般是指一些預先定義的函數，目的是可以為開發人員快速訪問某一程序，而無需了解和訪問源碼，或理解它內部工作機制的細節.

API 可以快速調用某個程序。

API?只是提供純粹的數據（7゜c），并不包含與展示相關的字體顏色、字體大小、位置等信息。

fetch調用API

API，本質上就是一個?URL。開頭也是?http（或https），只是返回的內容有明顯的區別，沒有大量多余的字符。

API?返回的內容統稱為數據,可以使用fetch方法來獲取這部分數據。

fetch('https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-1-1'
).then(function (response) {return response.json();}).then(function (myJson) {console.log(myJson);});

fetch返回了一個promise對象

promise

Promise?是異步編程的一種解決方案,（

異步編程是一種編程模式，它允許程序在執行某些操作時不必等待其完成，而是可以繼續執行其他操作。這種編程模式通常用于處理需要等待I/O操作（如讀取文件、網絡請求等）的情況，以提高程序的性能和響應速度。

在異步編程中，程序會發起一個異步操作，然后繼續執行后續的代碼，等待異步操作完成后再執行相應的回調函數或處理結果。這樣可以避免程序在等待操作完成時被阻塞，提高了程序的并發性和響應能力。

常見的異步編程方式包括使用回調函數、Promise對象、async/await等。異步編程在現代的Web開發中被廣泛應用，特別是在處理大量的網絡請求和數據處理時，可以有效提高程序的性能和用戶體驗。

）Promise對象可以通過.then觸發回調函數，then中文意思下一步，也非常符合人的語義化習慣。

response.json()返回的也是一個 Promise 對象，所有后續可以繼續使用.then觸發后續回調。

?GET請求

類似于數據請求的接口，一般稱作GET接口。而fetch在不指定類型時，默認是發起GET請求。

GET參數請求

API?調用需要參數，我們只要把包含參數的完整的?URL?直接傳入到方法中。

POST請求

提交數據至服務端進行增加、修改、刪除等操作，都是?POST?操作。我們在網頁上提交表單進行登錄的場景就是典型的POST操作。

fetch - POST 操作

文檔中搜索POST,需要添加參數method。

fetch('https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-4-1',{method: 'POST'}
).then(function(response) {return response.json();}).then(function(myJson) {console.log(myJson);});

由于未提供賬號與密碼我們所得到是

{"isSuccess": false
}

將密碼與賬號輸入。?

// 把JSON數據序列化成字符串
const data = JSON.stringify({username: 'admin',password: '123456'
});fetch('https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-4-1',{method: 'POST',body: data,headers: {'content-type': 'application/json'}}
).then(function(response) {return response.json();}).then(function(myJson) {console.log(myJson);});