Tauri发送网络请求系列，接口请求封装并遇到的问题解决办法-Toy模板网

这篇具有很好参考价值的文章主要介绍了Tauri发送网络请求系列，接口请求封装并遇到的问题解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Tauri发送网络请求系列，接口请求封装并遇到的问题解决办法,苹果开发,客户端开发,http,网络协议,网络,tauri

接口请求处理
项目中没有使用 axios 等前端 HTTP 请求库，使用的是 Tauri 内置的 fetch 方法，但该方法使用比较简单，没有请求拦截器或响应拦截器相关配置，所以我们有必要在此基础上做下二次封装。

1. 配置安全域名在 tauri.conf.json 里添加配置

        "allowlist": {
            "all": true,
            "http": {
                "scope": ["http://**", "https://**"]
            },
            "shell": {
                "all": false,
                "open": true
            }
        },

红框选中的内容是必须改的，不然会发生跨域：

Tauri发送网络请求系列，接口请求封装并遇到的问题解决办法,苹果开发,客户端开发,http,网络协议,网络,tauri

2. 封装 http 请求

新建 utils/http.ts 文件

import { fetch } from '@tauri-apps/api/http'
import qs from 'qs'

const server = ''
const baseURL = `${server}/api/v1`

const BODY_TYPE = {
    Form: 'Form',
    Json: 'Json',
    Text: 'Text',
    Bytes: 'Bytes',
}

const commonOptions = {
    timeout: 60,
}

const isAbsoluteURL = (url: string): boolean => {
    return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)
}

const combineURLs = (baseURL: string, relativeURL: string): string => {
    return relativeURL
        ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
        : baseURL
}

const buildFullPath = (baseURL: string, requestedURL: string) => {
    if (baseURL && !isAbsoluteURL(requestedURL)) {
        return combineURLs(baseURL, requestedURL)
    }
    return requestedURL
}

const buildURL = (url: string, params: any): string => {
    if (!params) {
        return url
    }
    const serializedParams = qs.stringify(params)
    if (serializedParams) {
        url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
    }
    return url
}

const http = (url: string, options: any = {}) => {
    const params = { ...options.params }
    if (!options.headers) options.headers = {}
    // todo 可以往 headers 中添加 token 或 cookie 等信息

    if (options?.body) {
        if (options.body.type === BODY_TYPE.Form) {
            options.headers['Content-Type'] = 'multipart/form-data'
        }
    }

    options = { ...commonOptions, ...options }
    return fetch(buildURL(buildFullPath(baseURL, url), params), options)
        .then(({ status, data }) => {
            if (status >= 200 && status < 400) {
                return { data }
            }
            return Promise.reject({ status, data })
        })
        .catch((err) => {
            console.error(err)
            return Promise.reject(err)
        })
}

export default http

3.简单实用

这里要注意，发送请求前，就要知道返回的数据类型：下面三种

Tauri发送网络请求系列，接口请求封装并遇到的问题解决办法,苹果开发,客户端开发,http,网络协议,网络,tauri 不然会发生错误。

as JSON: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON;
try setting the `responseType` option to `ResponseType.Text` or `ResponseType.Binary` if the API does not return a JSON response.
at chunk-YIDC66OP.js:1:1532 Tauri发送网络请求系列，接口请求封装并遇到的问题解决办法,苹果开发,客户端开发,http,网络协议,网络,tauri

这是因为没有指定响应的数据类型，需要添加一下： responseType: http.ResponseType.Text

文章来源地址https://www.toymoban.com/news/detail-633556.html

GET：

import http from '@/utils/http';

const params = {};

http('https://www.baidu.com/get', {
  method: 'get',
  params,
});

POST：

import { Body } from '@tauri-apps/api/http';
import http from '@/utils/http';

const body = Body.json({
  test: '1',
});

http('https://www.baidu.com/post', {
  method: 'post',
  body,
});

POST 上传文件

import { Body } from '@tauri-apps/api/http';
import http from '@/utils/http';

const generateFileInfo = (
  arrayBuffer: any,
  mime: string,
  fileName: string,
) => {
  return {
    file: new Uint8Array(arrayBuffer),
    mime,
    fileName,
  };
};

const arrayBuffer = await file.arrayBuffer();
const body = Body.form({
  file: generateFileInfo(arrayBuffer, file.type, file.name),
  // todo 其他参数
});

http('https://www.baidu.com/upload', {
  method: 'post',
  body,
});

带数据类型的请求：

async function getData() {
    const params = {}
    const res = await http('https://www.baidu.com', {
        method: 'get',
        params,
        responseType: ResponseType.Text,
    })
    console.log('返回的数据是：', res)
}

请求到的数据：

Tauri发送网络请求系列，接口请求封装并遇到的问题解决办法,苹果开发,客户端开发,http,网络协议,网络,tauri