Tauri http请求响应 Axios化封装

本代码主要目的是不修改前端的情况下同时兼容Tauri的API调用方式和Axios的调用方式

1. 修改Tauri配置文件

//  ./src-tauri/tauri.config.json

  "tauri": {
    "allowlist": {
      "all": true,
      "http":{
        "scope":[
          "http://**",
          "https://**"
        ]
      }
    },

2. 封装Tauri提供的请求API

//  request.js
import {http} from "@tauri-apps/api";

class Ask {
    constructor(config) {

    }

    interceptors = {
        baseURL: 'http://localhost:5000',
        requert: {
            headers: {},
            body: {},
            use: () => {

            }
        },
        response: response => {
            return new Promise((rec, rej) => {
                console.log('ECT',response)
                if (response.data.type == 'success') {
                    rec(response.data)
                }
            })
        }
    }
    post = (url, data) => {
        return new Promise(resolve => {
            const requestBody = {...data, ...this.interceptors.requert.body}
            const requestHeaders = {...this.interceptors.requert.headers}
            this.interceptors.requert.use();
            http.fetch(this.interceptors.baseURL + url, {
                headers: requestHeaders,
                method: 'POST',
                // 常规的json格式请求体发送
                body: http.Body.json(requestBody)
            }).then(res => {
                // res为请求成功的回调数据
                resolve(this.interceptors.response(res))
            });
        })
    }
    get = (url, data) => {
        return new Promise(resolve => {
            const requestQuery = {...data, ...this.interceptors.requert.body}
            const requestHeaders = {...this.interceptors.requert.headers}
            this.interceptors.requert.use();
            http.fetch(this.interceptors.baseURL + url, {
                headers: requestHeaders,
                method: 'GET',
                // 常规的json格式请求体发送
                query: requestQuery
            }).then(res => {
                // res为请求成功的回调数据
                resolve(this.interceptors.response(res))
            });
        })
    }
}

export default Ask

3. 使用

初始化

//  api.js
import Ask from "./request.js";

const myAsk = new Ask()

const AskGY = {
    /**
     * 演示
     * */
    checkDuplicateForUsername : async info => {return myAsk.post('/askgy/sign/checkDuplicateForUsername',info)},
    /**
     * 项目
     * */
    getProjectList : async info => {return myAsk.post('/askgy/project/getProjectList',info)},

}

export default AskGY

页面组件调用

//  Components.js
import AskGY from "../../../../request/AskGY";
import {useEffect, useState} from "react";
import AskGY from "./api.js"

export default function Components(){
  const [reflush, setReflush] = useState(true)

  useEffect(() => {
//  React 18这里无法使用异步函数

    AskGY.getProjectList().then(returnData => {
      console.log(returnData.data)
    })
    return () => { }
  }, [window.location.pathname, reflush])

  return (<div>Hello World!</div>)  
}