Web: fetch API

2022-06-04 13:04:00 阅读：155 来源： 互联网

标签：Web const log response json API console document fetch

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="d.js"></script>
  <div id="root">

  </div>
</body>
</html

async function getData() {
  const url = 'http://jsonplaceholder.typicode.com/posts'
  const response = await fetch(url)
  console.log(response)
  const posts = await response.json()
  console.log(posts)

  const root = document.querySelector('#root')
  const ul = document.createElement('ul')

  posts.forEach(post => {
    const li = document.createElement('li')
    const a = document.createElement('a')

    a.appendChild(document.createTextNode(post.title))
    a.setAttribute('href', `${url}/${post.id}`)

    li.appendChild(a)
    ul.appendChild(li)

  })

  root.appendChild(ul)
}

getData()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>btn</button>
  <img>
  <script>
    const url = 'https://dog.ceo/api/breeds/image/random'
    // const promise = fetch(url)
    console.log(promise)
    // promise.then(response => {
    //   console.log(response instanceof Response)
    //   console.log(response)
    //   console.log(response.body)
    //   // console.log(response.json())
    //   return response.json()
    // }).then(data => console.log(data))

    const button = document.querySelector('button')
    const img = document.querySelector('img')

    button.addEventListener('click', () => {
      fetch(url)
        .then(response => {
          console.log('response:', response)
          if(response.ok) {
            return response.json()
          }
          throw new Error('error!')
        })
        .then(data => img.src = data.message)
    })
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>btn</button>
  <input type="text" placeholder="name">
  <script>

    const button = document.querySelector('button')
    const input = document.querySelector('input')

    button.addEventListener('click', () => {
      fetch('http://jsonplaceholder.typicode.com/users', {
        method: 'post',
        body: JSON.stringify({ name: input.value }),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
        if(response.ok) {
          return response.json()
        }
        throw new SyntaxError('error!')
      }).then(data => console.log(data))
    }
    )
  </script>
</body>

</html>

标签：Web,const,log,response,json,API,console,document,fetch
来源： https://www.cnblogs.com/dissipate/p/16341671.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Web: fetch API