接入每天60S看世界API

Timeline

更新日志

2022-04-22

文章发布

2024-07-23

将XMLHttpRequest替换为fetch，增加打字机效果

前言

目前在网上已经有很多博主出了对博客引入这个API的教程，内容也已经比较详细，但是很多通过直接获取整张图片的形式；这样做省去了很多不必要的麻烦，只是图片在加载的时候会比较缓慢，而且在静态博客框架下开启图片懒加载后有几率发生图片加载失败的情况。还有一些博主也使用了直接请求文字内容的教程，而这些很多都是针对基于PHP搭建的博客，不能用于静态博客。

XMLHttpRequest求情Http

XMLHttpRequest是JavaScript中自带Http请求函数，可以快速调出浏览器调试界面发请求。在小规模的情况下可以有效减少其他依赖快速的接入接口。

方法	描述
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )
send(content)	向服务器发送请求

在代码中主要值使用了XMLHttpRequest中的这几个方法，更多方法可以到 (XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org) 中查看更多方法使用技巧

开始引入

注册ALAPI 账号获取Token
注册账号后到用户管理界面获取Token并保存，在后面的代码部分会使用到

代码部分

<div>
    <div style="display: flex;flex-direction: column;align-items: center;">
        <h1 style="color: red;font-size: 2.5em;">每天60s看世界</h1>
        <img id="head-img" src="" alt="">
        <p id="news" style="width:90%; color: blue;font-size: 1.4em;">新闻正在加载</p>
    </div>
    <script>
        (() => {
            const news = document.querySelector('#news')
            const headImg = document.querySelector('#head-img')
            var xhr = new XMLHttpRequest()
            fetch('https://v2.alapi.cn/api/zaobao', {
                method: "POST", // or 'PUT'
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    token: 'wNj349sLbMqqUaew',
                    format: 'json',
                }),
            }).then(res => res.json()).then(ori => {
                var text = ori.data.news
                var str = ''
                for (let i = 0; i < text.length; i++) { str += text[i] + '<br>' }
                // news.innerHTML = str;
                headImg.src = ori.data.head_image
                let i = 0;
                let str_ = ''
                let timer = setInterval(() => {
                    if (str_.length < str.length) {
                        str_ += str[i++]
                        news.innerHTML = '<p>' + str_ + '_</p>'                        //打印时加光标
                    } else {
                        clearInterval(timer)
                        news.innerHTML = '<p>' + str_ + '</p>'
                    }
                }, 50)
            })
        })()
    </script>
</div>

找到代码中xhr.send('token=粘贴刚刚获取到的Token&format=json');部分，将刚刚获取到的Token粘贴到中文标注部分。