API定义

API stands for Application Program Interface, which can be defined as a set of methods of communication between various software components. In other words, an API allows software to communicate with another software.

MDN web docs的Web API简介

API抽象了该应用中复杂的代码，提供一些简单的接口规则供使用其他应用使用。相当于应用之间互相借用功能的一个渠道。

访问第三方API的方式

首先，需要明确访问第三方API的主体是谁。

我们把网页的资源（包括静态资源和动态资源）放在网页服务器(Web Server)上。当客户端浏览器对服务器进行请求的时候，网页服务器依据这些资源作出回应。返回这些资源之前需要访问第三方API，因此是网页服务器在访问第三方API。

HTTP Requests

Use HTTP requests to communicate to a publicly available URL endpoint containing JSON data.

常用HTTP方法

动作	方法	操作
Create	`POST`	创建新的资源
Read	`GET`	获取资源
Update	`PUT/PATCH`	更新已有资源
Create	`DELETE`	删除资源

操作步骤

var request = new XMLHttpRequest();
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
request.onload = function() {
  var data = JSON.parse(this.response)
  if(request.status >= 200 && request.status < 400){
  // 对数据的操作
  } else {
  // 链接不存在的情况
  }
}
request.send();

一些技巧

在获取到JSON数据后，先不着急把数据放入到已存在的或者已创建的DOM元素中，先使用console.log()在控制台输出数据，并用浏览器的检查元素Inspect查看一下。
需要考虑链接失效的情况，对于每一个HMLHttpRequest对象，都会在请求结束资源后返回一个状态码status，用它来判断是否成功获取了资源。
一般需要查询第三方API的官方说明文档，里面会有获取资源的说明，以及会返回什么样的状态码。

Fetch API

Fetch API用于取代XHR，是HTML 5的内置API。

fetch() 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。你也可以传一个可选的第二个参数 init（参见 Request）。

一旦 Response 被返回，就可以使用一些方法来定义内容的形式，以及应当如何处理内容（参见 Body）。

// replace url with your JSON feed
fetch('url')
	.then((response) => {
		return response.json();
})
	.then((data) => {
  	// work with JSON data here
  	console.log(data);
})
	.catch((error) =>{
  	// do something for an error here
})

简单Demo

How to Connect to an API with JavaScript