实例演示fetch , async, await 的用法

fetch 的用法

1. fetch：
   例如要向https://jsonplaceholder.typicode.com/todos/20 发送请求，请求结果返回浏览器中

   function getData(ele) {
        fetch('https://jsonplaceholder.typicode.com/todos/20')
          .then(function (response) {
            return response.json()
          })
          .then(function(json) {
            console.log(json)
            //将返回的数据显示在li上
            ele.insertAdjacentHTML('afterend', `<li>${json.title}</li>`)
          })  
      }

   简化代码改成同步风格：

   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))

async, await 的用法

async function getData(ele) {
        const url = 'https://jsonplaceholder.typicode.com/todos/15'
        try {
         //await 必须用在 async 声明的函数内部
          const response = await fetch(url)
          const result = await response.json()
          console.log(result)
          // 把title的值渲染到到页面
          ele.insertAdjacentHTML('afterend', `<li>${result.title}</li>`)
        } catch {
          console.error('请求失败')
        }
      }