快捷導(dǎo)航

小程序Request的另類(lèi)用法詳解

更新時(shí)間：2019年08月09日 11:05:11 作者：TankCJZ

這篇文章主要介紹了小程序Request的另類(lèi)用法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

小程序中唯一能發(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: