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

朴灿烈づ我的快乐病毒、 2023-10-04 23:33 34阅读 0赞

![91099f0dd8cd4b2da93a2914507ea734.png][]

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

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

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

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

![6d4e299cde9d422bbe29649e16e9063d.png][]

### 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.简单实用 ###

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

![28572475f1ec405e915e9e41846b503b.png][]不然会发生错误。

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![65e6ecf43ea449f9b70c8651d5b3ef43.png][]

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

### 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)
    }

请求到的数据：

![dcf74d651fef4585bc3ae4cf6aec789c.png][]

[91099f0dd8cd4b2da93a2914507ea734.png]: https://img-blog.csdnimg.cn/91099f0dd8cd4b2da93a2914507ea734.png
[6d4e299cde9d422bbe29649e16e9063d.png]: https://img-blog.csdnimg.cn/6d4e299cde9d422bbe29649e16e9063d.png
[28572475f1ec405e915e9e41846b503b.png]: https://img-blog.csdnimg.cn/28572475f1ec405e915e9e41846b503b.png
[65e6ecf43ea449f9b70c8651d5b3ef43.png]: https://img-blog.csdnimg.cn/65e6ecf43ea449f9b70c8651d5b3ef43.png
[dcf74d651fef4585bc3ae4cf6aec789c.png]: https://img-blog.csdnimg.cn/dcf74d651fef4585bc3ae4cf6aec789c.png