遠程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)