小程序Request的另類(lèi)用法詳解
前言
小程序中唯一能發(fā)送網(wǎng)絡(luò)請(qǐng)求接口數(shù)據(jù)的是wx.request接口，當(dāng)然這個(gè)接口存在諸多的限制，例如：10個(gè)并發(fā)請(qǐng)求限制，https限制（當(dāng)然在開(kāi)發(fā)階段是可以關(guān)閉此限制），除了wx.request還有其他方法可以實(shí)現(xiàn)類(lèi)型的功能嗎？當(dāng)然是有的,這個(gè)思路也源于我之前看到的一篇文章，隨便筆記下來(lái)
思路
使用云開(kāi)發(fā)來(lái)發(fā)送網(wǎng)絡(luò)請(qǐng)求并把數(shù)據(jù)返回給小程序端。還不了解的云開(kāi)發(fā)的同學(xué)請(qǐng)速度移步到官方【云開(kāi)發(fā)】
新建一個(gè)http的云函數(shù)
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
const axios = require('axios')
cloud.init()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
const { method, url, data } = event;
const res = await axios.request({
method: method,
url: url,
data: data
});
return { code: 1, data: res.data } || {code: -1, msg: 'error', data: null}
}
小程序端二次封裝云函數(shù)調(diào)用
async http(options = {}) {
return wx.cloud.callFunction({
name: 'http',
data: {
method: options.method || 'GET',
url: options.url || '',
data: options.data || {}
}
}).then(res => {
return res.result
})
},
小程序端使用
async onLoad() {
this.http({
method: 'GET',
url: 'https://www.baidu.com'
}).then(res => {
console.log(res)
})
},
總結(jié)
這種方法可以很好繞過(guò)https的限制，當(dāng)然這只是提供一個(gè)簡(jiǎn)單的思路，我們可以進(jìn)一步細(xì)一點(diǎn)封裝，包括配置header proxy 等等功能，其實(shí)原理就是借助云函數(shù)做了二次轉(zhuǎn)發(fā)，性能上肯定比不上原生的request
注意
async 和 await 語(yǔ)法糖在最新的開(kāi)發(fā)工具中已經(jīng)實(shí)現(xiàn)了，開(kāi)啟增強(qiáng)編譯即可使用，具體更新內(nèi)容請(qǐng)移步官方社區(qū) 微信小程序社區(qū)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中的this關(guān)鍵字介紹與使用實(shí)例
JavaScript其實(shí)一門(mén)基于或者說(shuō)是面向?qū)ο蟮恼Z(yǔ)言，這樣的話，this這個(gè)關(guān)鍵字，在類(lèi)的內(nèi)部就顯得尤為重要2013-06-06
Webpack?5新特性學(xué)習(xí)與性能優(yōu)化實(shí)踐
Webpack?5的新特性和改進(jìn)為前端開(kāi)發(fā)者提供了更強(qiáng)大、更高效的構(gòu)建工具,通過(guò)內(nèi)置的持久性緩存插件、優(yōu)化的默認(rèn)配置、Webpack?CLI的改進(jìn)等,Webpack?5使得構(gòu)建過(guò)程更加簡(jiǎn)化,性能更加優(yōu)越2024-05-05
JavaScript實(shí)現(xiàn)的DOM樹(shù)遍歷方法詳解【二叉DOM樹(shù)、多叉DOM樹(shù)】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的DOM樹(shù)遍歷方法,結(jié)合實(shí)例形式詳細(xì)分析了二叉DOM樹(shù)、多叉DOM樹(shù)的前序、中序與后序遍歷,以及多叉樹(shù)深度優(yōu)先、廣度優(yōu)先等相關(guān)遍歷操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
webapi根據(jù)id獲取元素的實(shí)現(xiàn)思路
掌握document.getElementById() 根據(jù)id獲取元素,在頁(yè)面畫(huà)出一個(gè)寬200 高200 粉色的盒子, 在控制臺(tái)打印這個(gè)盒子,接到這樣的需求如何處理呢,下面小編給大家分享webapi根據(jù)id獲取元素的實(shí)現(xiàn)思路,感興趣的朋友一起看看吧2024-02-02
js 獲取網(wǎng)絡(luò)圖片的高度和寬度的實(shí)現(xiàn)方法(變通了下)
簡(jiǎn)單地說(shuō)就是把圖片放入一個(gè)自動(dòng)伸縮的DIV中，然后獲取DIV的寬和高！這個(gè)不錯(cuò)的變通，大家可以參考下。2009-10-10
Javascript注入技巧...2007-06-06
JavaScript實(shí)現(xiàn)更改網(wǎng)頁(yè)背景與字體顏色的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)更改網(wǎng)頁(yè)背景與字體顏色的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕改變網(wǎng)頁(yè)背景色的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
javascript和jquery分別實(shí)現(xiàn)的九九乘法表代碼
javascript 九九乘法表 附j(luò)query 實(shí)現(xiàn)的九九乘法表代碼2010-03-03
JavaScript 函數(shù)參數(shù)是傳值(byVal)還是傳址(byRef) 分享
這篇文章主要介紹了在JS中函數(shù)參數(shù)是傳值(byVal)還是傳址(byRef)的誤區(qū)我們通過(guò)實(shí)例說(shuō)明一下，有需要的朋友可以參考2013-07-07
微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實(shí)現(xiàn)步驟
實(shí)際開(kāi)發(fā)中很多時(shí)候我們需要通過(guò)上個(gè)頁(yè)面?zhèn)鬟^(guò)來(lái)的值動(dòng)態(tài)的更改標(biāo)題欄文字,下面這篇文章主要給大家介紹了關(guān)于微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實(shí)現(xiàn)步驟,需要的朋友可以參考下2023-02-02