Taro.request | 基于taro的微信小程序http请求配置

Taro.request | 基于taro的微信小程序http请求配置
飞书知识库参考：https://f01iu0yewg8.feishu.cn/wiki/GLomw3180isInDkMmw3cbfHQn0c?from=from_copylink

Step 1：合法域名配置
每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

服务器域名在「小程序后台-开发管理开发设置-服务器域名」中进行配置，配置时需要注意：

• 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
• 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；
• 更多细节：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
  

Step 2：配置Taro.request
使用Taro开发微信小程序时，需要使用其自带的Taro.request(option)发起 HTTPS 网络请求，后端接口文档如下：

# 后端接口文档main.py
from flask import Flask, request, Response
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/", methods=["GET"])
def index():
    return "Hello World!"

前端具体代码实现：

1. 抽象apiClient

// ./src/api/request.ts
import Taro from '@tarojs/taro'

export default {
  baseURL: 'your baseURL', // set default baseURL

  apiClient(option, method = 'GET') {
    // if option.url is relative path,splicing baseURL
    if (!option.url.startsWith('http')) {
      option.url = this.baseURL + option.url;
    }

    return Taro.request({
      ...option,
      method,
      header: {
        'content-type': 'application/json'
      }
    });
  },

  get(url, data = {}) {
    return this.apiClient({ url, data }, 'GET');
  },

  post(url, data) {
    return this.apiClient({ url, data }, 'POST');
  },
};

2. 编写前端api函数

// ./src/api/helloworld.ts
import apiClient from './request'


export default function requestHelloWorld() {
  return apiClient.get('/')
}

3. 渲染获取到的后端接口数据

import { View, Text } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import React, { useState } from 'react';
import './chat.scss'

import requestHelloWorld from '../../api/chat'

export default function Index() {
  useLoad(() => {
    console.log('Page loaded.')
  })
  const [data, setData] = useState('')

  const handleHelloworld = async () => {
    try {
      const response = await requestHelloWorld();

      console.log("get response", response)

      setData(response.data);
    } catch (error) {
      console.error('Error sending chat message:', error);
    }
  }

  return (
    <View className='index'>
      <Text>{data}</Text>
      <button onClick={handleHelloworld}>Fetch Hello World</button>
    </View>
  )
}

最终渲染结果如下，点击Fetch Hello World按钮，将在页面上打印出后端接口返回的Hello World!文本