JavaScript调用API
徐徐 抱歉选手

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 删除资源

操作步骤

1
2
3
4
5
6
7
8
9
10
11
12
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();

一些技巧

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

Fetch API

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
// 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

  • 本文标题:JavaScript调用API
  • 本文作者:徐徐
  • 创建时间:2020-10-11 09:50:19
  • 本文链接:https://machacroissant.github.io/2020/10/11/js-with-api/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论