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.
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 | var request = new XMLHttpRequest(); |
一些技巧
- 在获取到JSON数据后,先不着急把数据放入到已存在的或者已创建的DOM元素中,先使用
console.log()
在控制台输出数据,并用浏览器的检查元素Inspect
查看一下。 - 需要考虑链接失效的情况,对于每一个
HMLHttpRequest
对象,都会在请求结束资源后返回一个状态码status
,用它来判断是否成功获取了资源。 - 一般需要查询第三方API的官方说明文档,里面会有获取资源的说明,以及会返回什么样的状态码。
Fetch API
Fetch API用于取代XHR,是HTML 5的内置API。
fetch()
必须接受一个参数——资源的路径。无论请求成功与否,它都返回一个 Promise 对象,resolve 对应请求的Response
。你也可以传一个可选的第二个参数init
(参见Request
)。
1 | // replace url with your JSON feed |
简单Demo
- 本文标题:JavaScript调用API
- 本文作者:徐徐
- 创建时间:2020-10-11 09:50:19
- 本文链接:https://machacroissant.github.io/2020/10/11/js-with-api/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
评论