Web: fetch API

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

相关推荐