溫馨提示×

ajax、axios與fetch怎么調(diào)用后臺api

小億
89
2023-10-21 16:26:31
欄目: 編程語言

使用Ajax調(diào)用后臺API:

$.ajax({
  url: "your-api-url",
  type: "GET/POST/PUT/DELETE",
  dataType: "json", // 根據(jù)后臺返回的數(shù)據(jù)類型決定,可以是json、xml、html等
  data: { // 可選,發(fā)送到服務(wù)器的數(shù)據(jù),可以是對象、字符串或數(shù)組
    param1: value1,
    param2: value2
  },
  success: function(response) {
    // 請求成功后的處理邏輯
    console.log(response);
  },
  error: function(xhr, status, error) {
    // 請求失敗后的處理邏輯
    console.log(xhr.responseText);
  }
});

使用Axios調(diào)用后臺API:

axios({
  method: "GET/POST/PUT/DELETE",
  url: "your-api-url",
  params: { // 可選,發(fā)送到服務(wù)器的查詢參數(shù),可以是對象
    param1: value1,
    param2: value2
  },
  data: { // 可選,發(fā)送到服務(wù)器的請求體數(shù)據(jù),可以是對象
    param1: value1,
    param2: value2
  }
})
  .then(function(response) {
    // 請求成功后的處理邏輯
    console.log(response.data);
  })
  .catch(function(error) {
    // 請求失敗后的處理邏輯
    console.log(error.response.data);
  });

使用Fetch調(diào)用后臺API:

fetch("your-api-url", {
  method: "GET/POST/PUT/DELETE",
  headers: {
    "Content-Type": "application/json" // 根據(jù)后臺要求的數(shù)據(jù)類型決定,可以是application/json、application/xml等
  },
  body: JSON.stringify({ // 可選,發(fā)送到服務(wù)器的請求體數(shù)據(jù),需要將對象轉(zhuǎn)換為JSON字符串
    param1: value1,
    param2: value2
  })
})
  .then(function(response) {
    // 請求成功后的處理邏輯
    return response.json(); // 解析響應(yīng)數(shù)據(jù)為JSON
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    // 請求失敗后的處理邏輯
    console.log(error);
  });

注意:以上代碼中的"your-api-url"需要替換為實際的后臺API地址。

0