利用fetch方法實現Ajax請求

DayDreame發表於2019-02-28

fetch是Ajax的新方法，其實類似於我們的回撥。今天我們使用Beian的API地址寫一個請求的例子

API地址：

https://dog.ceo/api/breeds/image/random複製程式碼

我們新建一個html檔案，裡面包含了大標題H1，存放請求圖片的地方div，還有請求的點選按鈕

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>dogs</title>
</head>
<body>    
   <h1>Doggos</h1>    
   <div class="doggos">   </div>    
   <button class="add-doggo">add-doggo</button>    
<script src="./doggos.js"></script>
</body>
</html>複製程式碼

同時我們新建一個doggos.js

const DOG_URL = "https://dog.ceo/api/breeds/image/random"; //此地址是Beian的此時地址

const doggos = document.querySelector(".doggos"); //找到存放圖片的div

function addNewDoggo(){
const promise = fetch(DOG_URL); //fetch獲取請求地址

promise
   .then(function(Response){
      const processingPromise = Response.json();
      return processingPromise;
   })
   .then(function(processingPromise){
      const img = document.createElement("img"); //動態建立img標籤
      img.src = processingPromise.message;
      img.alt = "小狗狗";
      doggos.appendChild(img);
     });
   }

document.querySelector(".add-doggo").addEventListener("click",addNewDoggo); //監聽點選事件，執行新增圖片效果

總體效果:

利用fetch方法實現Ajax請求

fetch他其實替代了XMLHttpReuest,鏈式風格也是很有魅力的，包括返回的promise。大家在以後的時候，希望還是多實用這些新出來的方法，他能夠有效的降低你的開發時間，並且能夠展現出她獨特的美


相關文章