解析rss链接数据，来长期把某博客数据订阅到自己的网站

目的

在这里插入图片描述
当我们打开这个订阅链接，会看到我们的文章信息以xml的形式呈现到浏览器页面中，怎么直接在我们自己的网站中，将这个链接的数据转为我们熟悉的json数据，然后渲染到自己的网站中呢

技术栈

react hooks
typescript
webpack

核心思想

通过axios请求这个订阅链接，拿到xml文本；
将xml文本转为XMLDocument格式；
将xmlDocument格式解析为json数据；（最后一步，网上找了一个解决方案，不过博主已经上传到自己的个人资源中，以便于大家方便使用）。

代码

按照上面三步骤，会依次贴上代码
api/index.ts

/** 简单写了一下请求拦截器和响应拦截器，就导出来了 大家可以直接axios就行的 */
import request from '../utils/request';
import { CSDN_RSS_URL } from '../constants';/** 把常量从外面引进来，统一管理思想 */
export const getRssList = () => request({url: CSDN_RSS_URL,method: 'get'
});

别人的请求，我们直接访问会跨域，所以本地开发要代理，当然我们部署的时候，让运维帮忙配置代理转发，或者交给后端去处理（后端直接不跨域）
webpack.dev.config.js

// 开发环境的反向代理配置 devserver这个配置项中
proxy: {'/qq_36579455': {target: 'https://rss.csdn.net',changeOrigin: true,}
}

xml文本转为XMLDocument格式
utils/index.ts

// 这里导入的文件，就是上面博主说的，大家直接在我的主页去下载就可以啦
import XMLToJson from './XMLToJson';/*** 解析xml 字符串为 dom 对象* @param xml * @returns */
export function xmlToDom(xml: string): XMLDocument {let xmlDom: any;if (window.DOMParser) {const parser = new DOMParser();xmlDom = parser.parseFromString(xml, 'text/xml');} else if ((window as any).ActiveXObject) { // 兼容ie6或者更老的const xmlDom = new (window as any).ActiveXObject('Microsoft.XMLDOM');xmlDom.async = false;xmlDom.loadXML(xml);}return xmlDom;
}export function xmlToJson(xml: XMLDocument): IRss | null {const obj = XMLToJson.parseXML(xml) as IRss;if (obj.rss && obj.rss.length) {return obj;} else {return null;}
}

为了方便，博主直接给大家贴出使用代码

随便一个新的组件

const [feeds, setFeeds] = useState([] as IRssItem[]);const getRss = async () => {try {const xml = await getRssList();const xmlDom = xmlToDom(xml as unknown as string);const tempJson = xmlToJson(xmlDom);tempJson && setFeeds(tempJson.rss[0].channel[0].item);} catch (err: any) {console.log(err.message, "get rss error");}};useEffect(() => {getRss();}, []); // 如果有eslint提示  加上这个注释就行// eslint-disable-next-line react-hooks/exhaustive-deps

不知名的types.ts

export interface IRssText {_text: string;
}export interface IRssItem {title: IRssText[];link: IRssText[];description: IRssText[];pubDate: IRssText[];author: IRssText[];category: any[];guid: IRssText[];
}