fetch请求：

function getData(ele){
const url = 'https://jsonplaceholder.typicode.com/todos/20'
fetch(url).then(res => res.json()).then(json => ele.insertAdjacentHTML('afterend', `<li>${json.title}</li>`)).catch(err => console.log(err))

可以获得并显示请求结果：

ullam nobis libero sapiente ad optio sint

async-await请求：

async function getData(ele){
    const url = 'https://jsonplaceholder.typicode.com/todos/'
    try{
    const response = await fetch(url)
    const result = await response.json()
    for(let i=0; i<10; i++){ele.insertAdjacentHTML('afterend', `<li>${result[i].title}</li>`)
    }
    } catch {
    console.error('请求失败');
    }
    }

添加for循环，请求并显示10条记录：

illo est ratione doloremque quia maiores aut
molestiae perspiciatis ipsa
quo adipisci enim quam ut ab
illo expedita consequatur quia in
qui ullam ratione quibusdam voluptatem quia omnis
laboriosam mollitia et enim quasi adipisci quia provident illum
et porro tempora
fugiat veniam minus
quis ut nam facilis et officia qui
delectus aut autem

总结：

跨域的概念有点陌生，按视频练了一遍，踩了好多坑；异步请求用的比较多，通过添加循环可以获得多条记录，对Ajax已经淘汰了的说法有点吃惊！感觉挺常见的。

【文章转自阿里云服务器代理商 http://www.558idc.com/aliyun.html 复制请保留原URL】