美文网首页js css html前端小库
前端需要的免费在线api接口

前端需要的免费在线api接口

作者: 德育处主任 | 来源:发表于2022-07-08 13:29 被阅读0次

回想当年刚接触前端,Ajax 真的碰一次就跪一次。当时不懂后端,不知道 api 是什么东东,也没有后端小伙伴写接口给我测试。

本文整理了我用过的几个 免费的在线api接口,而且不需要处理跨域等问题。

希望能给刚入门的前端小白在学习 Ajax 时提供一点帮助。

本文列举的在线接口包括:文本图片

本文案例都是使用 postman 进行测试的,因为我懒得自己写 Ajax 代码。

如果本文对您有帮助,请帮我点个赞呗👍

一、{JSON} Placeholder

『JSONPlaceholder』 提供用于测试的免费API。

file

JSONPlaceholder 使用方式非常简单,提供了 GETPOSTPUTPATCHDELETE 几个请求方法。

还提供分页查询、具体id查询等功能。

例:获取100篇文章数据(GET)

返回100条数据,每条内容都有帖子 ID、发贴人 ID、标题、以及简介。

http://jsonplaceholder.typicode.com/posts
file

例:根据文章ID获取文章数据(GET)

根据文章 ID 获取指定文章的数据。

返回:文章 ID、发贴人 ID、标题、以及内容。

http://jsonplaceholder.typicode.com/posts/2
file

本例传入的 ID 为2,返回 ID 为2的数据。

例:添加文章(POST)

使用 POST 发送一篇文章,发送成功会返回一个文章 ID 回来。

http://jsonplaceholder.typicode.com/posts
file

其他接口(自己试试吧)

帖子接口:
评论接口
专辑接口:
待办事宜接口:
用户接口:
照片接口:


二、猫奴福利接口

『The Cat API - Cats as a Service.』 会返回猫的图片,绝对是福利。

file

使用方法可以看 『文档』 ,里面包括猫的 “按品种搜索”、“按类别搜索”、“分页搜索”、“图片上传”、“图像分析”等接口,可以对照文档使用。

例:随机获取1张猫图(GET)

每次请求都会随机返回一张猫的图片。

https://api.thecatapi.com/v1/images/search?limit=1
file

其他接口的使用都比较简单,『官方文档』 都讲得很明白的,可以自己用 postman 测一下。


三、狗子接口

『Dog API』 提供了狗子的图片,官网的首页第一眼看到的 api 就可以随机获得一张狗子照片,非常有趣。

file

例:随机返回一张狗子照片(GET)

https://dog.ceo/api/breeds/image/random
file

其他接口的用法也好简单,详情可看 『狗子官方文档』


四、随机图片接口

『Lorem Picsum』 可以随机返回一张照片,还可以指定照片的尺寸。

file

Lorem Picsum 提供的接口返回的是一个图片资源,而且是随机返回的。

可以直接放在 <img> 标签的 src 属性内使用。

例:返回 宽和高都是200px 的图片(GET)

https://picsum.photos/200
file

例:比如想要获取 宽200,高300 的图片(GET)

如果宽高尺寸不同,可以自己设置。

https://picsum.photos/200/300
file


五、其他接口

前面4个是我用得最多的测试平台,接下来这些是我用得比较少,但知道有这回事。有需要的话可以自己测测。

爱奇艺接口

https://cache.video.iqiyi.com/jp/avlist/{片源id}/{页码}/
例:用海贼王的片源id(GET)
https://cache.video.iqiyi.com/jp/avlist/202861101/1/
file

可以猜到:

  • vpic:每集的封面
  • shortTitle:集数
  • vt:本集的名称
  • vid:视频id
  • vur:视频播放地址

其他字段自己猜吧,我懒~


物流接口

http://www.kuaidi100.com/query?type=快递公司代号&postid=快递单号

快递公司编码:

  • 申通:shentong

  • EMS:ems

  • 顺丰:shunfeng

  • 圆通:yuantong

  • 中通:zhongtong

  • 韵达:yunda

  • 天天:tiantian

  • 汇通:huitongkuaidi

  • 全峰:quanfengkuaidi

  • 德邦:debangwuliu

  • 宅急送:zhaijisong


淘宝商品接口

http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb

callback 是回调函数设定

点赞 + 关注 + 收藏 = 学会了

相关文章

  • 前端需要的免费在线api接口

    回想当年刚接触前端,Ajax 真的碰一次就跪一次。当时不懂后端,不知道 api 是什么东东,也没有后端小伙伴写接口...

  • 免费在线接口文档

    免费在线接口文档 用途: 方便前端程序员调试代码或学习使用 接口域名:http://www.duans.top 文...

  • 一些S级工具网站

    Iconfont-阿里巴巴矢量图标库 阿凡达数据-免费API接口 在线Json转DartModel 在线JSON校...

  • RESTful

    Api(接口)postman 接口工具模板引擎后端人员 不喜欢玩前端<%= %>前后端:后端提供接口(api)前端...

  • 在线生成网址二维码的API接口

    文字在线转图片二维码的公用API接口 在线生成网址二维码的API接口: 如果参数是URL ,需要进行URL编码后传...

  • ThinkPHP5开发API接口实例

    接口功能说明: 前端提交学生学号(sno)给Api,Api接口返回此学生的基本信息 API接口端 namespac...

  • 2018-08-02

    数据渲染 根据后端提供API数据接口,将其渲染至前端页面... 文档接口:API-URL: http://api....

  • vue中的实时天气

    网址 ↓ 右上“api文档” -- 左下“免费接口” -- “免费时况天气” 免费实况天气接口(测试需登录) 百度...

  • 接口验证码平台的稳定性怎么测试?

    短信api接口免费使用的平台有哪些?目前市场上的短信api接口很多,但是接口质量良莠不齐,所以在选择短信api接口...

  • Cannot modify header information

    angular+php+nginx,前端需要跨域请求api,所以在接口的BaseController.php加上这...

网友评论

    本文标题:前端需要的免费在线api接口

    本文链接:https://www.haomeiwen.com/subject/ymcvbrtx.html