在前端開發中，經常需要通過JS調用API接口獲取數據或與後端進行交互。本文將從多個方面詳細介紹JS調用接口的方法及注意事項。
一、JS調用接口的方法
JS調用接口的方法有多種，如使用XMLHttpRequest對象、Fetch API、jQuery的$.ajax()、Vue.js的axios等。這裡以使用XMLHttpRequest對象為例。
function postData() {
var url = "https://example.com/api";
var data = {name: 'John', age: 25};
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
}
postData();
上述代碼使用XMLHttpRequest對象向指定URL發送POST請求，並將請求體數據轉為JSON格式發送給後端。接收到響應後，在控制台中輸出響應內容。
二、JS調用接口是如何更改Content-Type
發送POST請求時需要在Request Header中設置Content-Type，常見的Content-Type有以下幾種：
- application/x-www-form-urlencoded：表單數據
- multipart/form-data：文件上傳
- application/json：JSON數據
可以通過調用setRequestHeader方法設置Content-Type。例如：
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
上述代碼將Content-Type設置為application/json。
三、JS調用接口並發
JS可以通過創建多個XMLHttpRequest對象並同時發送請求實現並發。例如：
var xhr1 = new XMLHttpRequest();
xhr1.open("GET", "https://example.com/api1", true);
xhr1.send();
var xhr2 = new XMLHttpRequest();
xhr2.open("GET", "https://example.com/api2", true);
xhr2.send();
//在兩個請求均獲得響應後執行其他操作
上述代碼中，同時發送了兩個GET請求，並在兩個請求均獲得響應後執行其他操作。
四、JS調用接口獲取返回
JS獲取接口返回可以通過監聽XMLHttpRequest對象的readystatechange事件，在響應狀態為4（完成）且狀態碼為200時獲取響應內容。例如：
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api", true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
上述代碼中，監聽XMLHttpRequest對象的readystatechange事件，當狀態為4（完成）且狀態碼為200時，在控制台中輸出響應內容。
五、JS調用接口設置超時時間
JS設置接口超時時間可以通過XMLHttpRequest對象的timeout屬性實現。例如：
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api", true);
xhr.timeout = 5000; //設置超時時間為5秒
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
xhr.ontimeout = function() {
console.log("請求超時！");
}
上述代碼中，設置XMLHttpRequest對象的timeout屬性為5000毫秒，監聽ontimeout事件，當請求超時時在控制台中輸出提示信息。
六、JS調用接口附件不下載
在下載附件時，服務器默認會將附件下載到本地。可以通過設置Content-Disposition響應頭實現讓瀏覽器在新標籤頁中打開附件而不是下載。例如：
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api", true);
xhr.responseType = "blob"; //設置響應類型為Blob
xhr.setRequestHeader("Content-Disposition", "inline"); //設置Content-Disposition響應頭
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var url = URL.createObjectURL(xhr.response);
window.open(url); //在新標籤頁中打開Blob數據
}
}
上述代碼中，設置XMLHttpRequest對象的responseType屬性為blob，以獲取Blob數據。同時設置Content-Disposition響應頭為inline，實現瀏覽器在新標籤頁中打開附件而不是下載。在獲取到Blob數據後，使用URL.createObjectURL方法生成URL，再通過window.open方法在新標籤頁中打開。
七、JS調用接口提示500
服務器返回500錯誤時，可以使用XMLHttpRequest對象的onerror事件監聽錯誤，並在控制台中輸出相應提示信息。例如：
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api", true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
xhr.onerror = function() {
console.log("服務器返回500錯誤！");
}
上述代碼中，監聽XMLHttpRequest對象的onerror事件，當服務器返回500錯誤時在控制台中輸出提示信息。
八、JS調用接口前端超時請求鏈會斷嗎
前端發送請求後，如果在請求超時時未收到響應，請求鏈並不會斷掉，仍然會發送到服務器。只是請求超時後監聽到ontimeout事件並進行相應處理。
九、JS調用HTTP接口
JS調用HTTP接口可以使用XMLHttpRequest對象。例如：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api", true); //使用HTTP協議
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
上述代碼中，使用XMLHttpRequest對象通過HTTP協議向URL發送GET請求，並在接收到響應後在控制台中輸出響應內容。
十、JS如何調用API接口數據
JS可以通過調用API接口獲取數據，以JSON格式返回數據。例如：
var url = "https://example.com/api";
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(json) {
console.log(json);
});
上述代碼中，調用fetch方法獲取URL返回的數據，通過鏈式調用then方法處理響應。第一個then方法將響應轉為JSON格式，第二個then方法接收JSON數據並在控制台中輸出。
結語
通過本文的詳細介紹，相信大家對JS調用接口有了更深入的了解。在應用中，仍需根據具體情況進行調整和優化，充分發揮JS調用接口的作用。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/227455.html
微信掃一掃 
支付寶掃一掃 