远程API请求 · JS与WEB前端框架技术

# 知识点 * [ ] 第三方库的Fly的引入与使用 * [ ] 网络请求 * [ ] JSON对象 * [ ] Promise对象的使用 * [ ] 错误处理 * [ ] async/await语法使用 * [ ] 箭头函数的使用使用flyio库进行远程数据（JSON格式）请求 > Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架，最大可能的实现 *Write Once Run Everywhere*。 ``` <html> <head> <script src="https://unpkg.com/flyio/dist/fly.min.js"></script> <script> //引入fly实例使用promise var fly = new Fly() fly.interceptors.request.use((request) => { request.headers = { 'Content-Type': 'application/json' }; }) // let page = 1; // let url = `https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${page}&shop_id=682731`; let url = 'https://api.beidian.com/mroute.html' let params = { page: 1, shop_id: 682731, method: 'beidian.h5.shop.product.list' } //query参数通过对象传递 fly.get(url, params).then((response) => { console.log(response); }).catch((error) => { console.log(error); }); //使用await/async语法封装 async function loadData() { let response = await fly.get(url, params); console.log(response); } loadData(); </script> </head> <body> <h1>访问远程的API</h1> </body> </html> ``` ![](https://box.kancloud.cn/45d3788a2c53202281405743b460f643_1142x558.png)