fetch是Ajax的新方法，其实类似于我们的回调。今天我们使用Beian的API地址写一个请求的例子
API地址：
https://dog.ceo/api/breeds/image/random复制代码
我们新建一个html文件，里面包含了大标题H1，存放请求图片的地方div，还有请求的点击按钮
dogs Doggos
复制代码
同时我们新建一个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他其实替代了XMLHttpReuest,链式风格也是很有魅力的，包括返回的promise。大家在以后的时候，希望还是多实用这些新出来的方法，他能够有效的降低你的开发时间，并且能够展现出她独特的美