web学习 -- JavaScript 链接 API

最新推荐文章于 2024-04-26 16:47:03 发布

菜鸟郭郭

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量485

点赞数

分类专栏： JavaScript 前端文章标签： javascript

原文链接：https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

JavaScript

23 篇文章 0 订阅

订阅专栏

JavaScript 链接 API

概述
- API
- - webAPI
实操

概述

API

应用程序接口，定义为各种软件组件之间的一组通信方法
即，API允许软件与另一软件进行通讯

webAPI

CRUD应用程序：create创建，read读取，update更新，delete删除（增删改查）
webAPI

实操

创建index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Ghibli App</title>

    <link
      href="https://fonts.googleapis.com/css?family=Dosis:400,700"
      rel="stylesheet"
    />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <div id="root"></div>
    <script src="scripts.js"></script>
  </body>
</html>

设置层叠样式 css

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and (min-width: 600px) {
  .card {
    flex: 1 1 calc(50% - 2rem);
  }
}

@media screen and (min-width: 900px) {
  .card {
    flex: 1 1 calc(33% - 2rem);
  }
}

JavaScript 链接API

获取API断点

使用ＨＴＴＰ请求检索数据

在尝试将任何内容放置在网站的前端之前，先打开API的连接。

使用XMLHttpRequest对象，这是打开文件并发出HTTP请求的一种方式。

创建一个request变量并为其分配一个新XMLHttpRequest对象。然后使用open()方法打开一个新连接-在参数中，我们将指定请求的类型GET以及API端点的URL。请求完成，我们可以访问onload函数内部的数据。完成后，我们将发送请求。

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)

request.onload = function () {
  // Begin accessing JSON data here
}

// Send request
request.send()

使用json响应

现在已经收到来自HTTP请求的响应，但响应是使用JSON的，因此需要将该JSON转换为JavaScript对象才能使用它。

用JSON.parse()解析响应，并创建一个data包含所有JSON作为JavaScript对象数组的变量。
使用forEach()，我们将控制台注销每部电影的标题，以确保其正常工作。

// Begin accessing JSON data here
var data = JSON.parse(this.response)

data.forEach((movie) => {
  // Log each movie's title
  console.log(movie.title)
})

处理状态码

// Begin accessing JSON data here
var data = JSON.parse(this.response)

if (request.status >= 200 && request.status < 400) {
  data.forEach((movie) => {
    console.log(movie.title)
  })
} else {
  console.log('error')
}

代码

采用同步方法

var request = new XMLHttpRequest()

request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)
request.onload = function () {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response)

  if (request.status >= 200 && request.status < 400) {
    data.forEach((movie) => {
      console.log(movie.title)
    })
  } else {
    console.log('error')
  }
}

request.send()

显示数据

获取HTML的dom元素并绑定数据

const app = document.getElementById('root')

const logo = document.createElement('img')
logo.src = 'logo.png'

const container = document.createElement('div')
container.setAttribute('class', 'container')

app.appendChild(logo)
app.appendChild(container)

将json数据绑定到dom元素中

data.forEach((movie) => {
  // Create a div with a card class
  const card = document.createElement('div')
  card.setAttribute('class', 'card')

  // Create an h1 and set the text content to the film's title
  const h1 = document.createElement('h1')
  h1.textContent = movie.title

  // Create a p and set the text content to the film's description
  const p = document.createElement('p')
  movie.description = movie.description.substring(0, 300) // Limit to 300 chars
  p.textContent = `${movie.description}...` // End with an ellipses

  // Append the cards to the container element
  container.appendChild(card)

  // Each card will contain an h1 and a p
  card.appendChild(h1)
  card.appendChild(p)
})

菜鸟郭郭

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web学习 -- JavaScript 链接 API

JavaScript 链接 API概述APIwebAPI实操创建index.html设置层叠样式 cssJavaScript 链接API获取API断点使用ＨＴＴＰ请求检索数据使用json响应处理状态码代码显示数据获取HTML的dom元素并绑定数据将json数据绑定到dom元素中概述API应用程序接口，定义为各种软件组件之间的一组通信方法即，API允许软件与另一软件进行通讯webAPICRUD应用程序：create创建，read读取，update更新，delete删除（增删改查）实操创建in
复制链接

扫一扫