Tauri 开发实践 — Tauri HTTP 请求开发

简介: 本文介绍了如何在 Tauri 中发起 HTTP 请求。首先通过安装 Tauri 生态中的工具包并配置 `tauri.conf.json` 文件来允许特定域名的 HTTP 通信。接着封装了一个简单的 HTTP 客户端类,并在页面中使用该客户端实现 GET 和 POST 请求。最后提供了完整的源码地址以供参考。此功能使得桌面应用能够与远程服务器进行交互,增强了应用的实用性。

本文首发微信公众号:前端徐徐。

大家好,我是徐徐。今天的主题是如何在 Tauri 中发起 HTTP 请求。

前言

前面铺垫了很多,但是我们一直都是在整个应用的架构层面做一些设计和开发,我们现在更近一步,集成 HTTP 支持,这意味着你的桌面应用现在可以与远程服务器通信了!

安装依赖

其实要集成 HTTP 是非常简单的,Tauri 生态里面有现成工具包,当然你可以 axios 这类请求包都行,但是需要注意适配器的问题,打包后有可能会有无法使用的问题。

我这里推荐使用 Tauri 生态里面有现成工具包,但是这个包也有个缺点,就是在浏览器控制台中是无法看到请求的,因为他是 Tauri 里面的 rust 去帮我们调用请求从而绕过了 webview2 前端框架,不过这个是官网推荐的包,在解决方案这块是有保障的,不会出现一些奇奇怪怪的问题。

npm install -D @tauri-apps/api

修改配置

依赖安装完了,其实还不能完全随心所欲的发起请求,我们需要修改一些配置。本质上,你是在告诉 Tauri允许向特定域名发起 HTTP 和 HTTPS 请求。这对于让你的桌面应用访问指定的API至关重要,你可以从允许向localhost 发起 HTTP 请求开始测试,下面是一个简单的配置例子。

  • src-tauri/tauri.conf.json
{
 //..
  "tauri": {
    "allowlist": {
      "http": {
        "all": true,
        "request": true,
        "scope": [
          "http://localhost/*",
          "http://jsonplaceholder.typicode.com/*"
        ]
      }
    },
  }
  // ...
}

请求类编码实现

这里的编码就是封装一个简单的 httpClient,然后在各个地方引用,跟常规的前端请求封装没有特别大的差别。

下面是简单的封装。

  • src/http/client.ts
import { fetch, FetchOptions, Response } from "@tauri-apps/api/http";
interface RequestInterceptor {
  onRequest(config: FetchOptions): FetchOptions | Promise<FetchOptions>;
}
interface ResponseInterceptor {
  onResponse<T>(response: Response<T>): Response<T> | Promise<Response<T>>;
  onError(error: Error): void | Promise<void>;
}
class HttpClient {
  private baseURL: string = '';
  private requestInterceptors: RequestInterceptor[] = [];
  private responseInterceptors: ResponseInterceptor[] = [];
  private constructor() {}
  private static instance: HttpClient;
  static getInstance(): HttpClient {
    if (!HttpClient.instance) {
      HttpClient.instance = new HttpClient();
    }
    return HttpClient.instance;
  }
  setBaseURL(baseURL: string): void {
    this.baseURL = baseURL;
  }
  addRequestInterceptor(interceptor: RequestInterceptor): void {
    this.requestInterceptors.push(interceptor);
  }
  addResponseInterceptor(interceptor: ResponseInterceptor): void {
    this.responseInterceptors.push(interceptor);
  }
  private async executeRequestInterceptors(config: FetchOptions): Promise<FetchOptions> {
    for (const interceptor of this.requestInterceptors) {
      config = await interceptor.onRequest(config);
    }
    return config;
  }
  private async executeResponseInterceptors<T>(response: Response<T>): Promise<Response<T>> {
    for (const interceptor of this.responseInterceptors) {
      response = await interceptor.onResponse(response);
    }
    return response;
  }
  private async executeErrorInterceptors(error: Error): Promise<void> {
    for (const interceptor of this.responseInterceptors) {
      await interceptor.onError(error);
    }
  }
  async request<T>(url: string, options: FetchOptions): Promise<T> {
    const config = await this.executeRequestInterceptors(options);
    try {
      const response = await fetch<T>(this.baseURL + url, config);
      const processedResponse = await this.executeResponseInterceptors(response);
      return processedResponse.data;
    } catch (error) {
      await this.executeErrorInterceptors(error as Error);
      throw error;
    }
  }
}
const httpClient = HttpClient.getInstance();
export default httpClient;

封装一个 HTTP 请求类,添加常规的配置,拦截器,响应器这些,然后再抽离一层出来,供外部使用。

  • src/http/index.ts
import httpClient from './client';
import { FetchOptions, Response, ResponseType,Body } from "@tauri-apps/api/http";
httpClient.setBaseURL('http://jsonplaceholder.typicode.com');
httpClient.addRequestInterceptor({
  onRequest(config: FetchOptions): FetchOptions {
    config.headers = {
      ...config.headers,
    };
    return config;
  }
});
httpClient.addResponseInterceptor({
  onResponse<T>(response: Response<T>): Response<T> {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response;
  },
  onError(error: Error): void {
    console.error('HTTP request error:', error);
    throw error;
  }
});
const get = async <T>(url: string) => {
  return httpClient.request<T>(url, { method: 'GET', responseType: ResponseType.JSON })
}
const post = async <T>(url: string,data:Record<string, unknown>) => {
  return httpClient.request<T>(url, { method: 'POST', body:Body.json(data), responseType: ResponseType.JSON })
}
export default {
  get,
  post
}

上面的代码主要是设置请求和相应拦截,然后封装了简单的 get 和 post 请求。

在页面中使用

import { useState } from "react"
import { Button, Card } from "@douyinfe/semi-ui"
import http from "@/http"
const Http = () => {
  const [getResponse, setGetResponse] = useState<string>('')
  const [postResponse,setPostResponse] = useState<string>('')
  const getFetchTest = () => {
    http.get("/posts/2").then(res => {
      setGetResponse(JSON.stringify(res))
    })
  }
  const postFetchTest = () => {
    http.post("/posts",{
      "id":1,
      "title":"foo",
      "body":"bar",
    }).then(res => {
      setPostResponse(JSON.stringify(res))
    })
  }
  return (
    <div>
      <Button onClick={getFetchTest}>发起Get请求测试</Button>
      <Card title="Get请求测试返回数据" style={{marginTop:10}}>
        {getResponse}
      </Card>
      <div style={{marginTop:20}}>
        <Button onClick={postFetchTest}>发起Post请求测试</Button>
        <Card title="Post请求测试返回数据" style={{marginTop:10}}>
          {postResponse}
        </Card>
      </div>
    </div>
  )
}
export default Http

非常简单的页面,到这里,在 Tauri 中进行 HTTP 请求的功能就实现了。

源码地址

https://github.com/Xutaotaotao/XTools/tree/feature-http

结语

这篇教程只是简单地在实现了 Tauri 中进行 HTTP 请求的功能,但是有了这个功能之后就可以做很多事情了,桌面端应用也充满了生机。如果大家有任何 Tauri 相关的问题,欢迎和我讨论。

相关文章
|
26天前
|
缓存 前端开发 API
|
2月前
|
数据采集 前端开发 算法
Python Requests 的高级使用技巧:应对复杂 HTTP 请求场景
本文介绍了如何使用 Python 的 `requests` 库应对复杂的 HTTP 请求场景,包括 Spider Trap(蜘蛛陷阱)、SESSION 访问限制和请求频率限制。通过代理、CSS 类链接数控制、多账号切换和限流算法等技术手段,提高爬虫的稳定性和效率,增强在反爬虫环境中的生存能力。文中提供了详细的代码示例,帮助读者掌握这些高级用法。
Python Requests 的高级使用技巧:应对复杂 HTTP 请求场景
|
14天前
|
JSON API 数据格式
Python中获取HTTP请求响应体的详解
本文介绍了如何使用Python的`requests`和`urllib`库发送HTTP请求并处理响应体。`requests`库简化了HTTP请求过程,适合快速开发;`urllib`库则更为底层,适用于性能要求较高的场景。文章详细演示了发送GET请求、处理JSON响应等常见操作。
|
20天前
|
前端开发 JavaScript Java
如何捕获和处理HTTP GET请求的异常
如何捕获和处理HTTP GET请求的异常
|
22天前
|
开发者
HTTP 协议请求方法的发展历程
【10月更文挑战第21天】
|
22天前
|
安全
HTTP 协议的请求方法
【10月更文挑战第21天】
|
22天前
|
缓存 安全 前端开发
HTTP 协议的请求方法在实际应用中有哪些注意事项?
【10月更文挑战第29天】HTTP协议的请求方法在实际应用中需要根据具体的业务场景和需求,合理选择和使用,并注意各种方法的特点和限制,以确保网络通信的安全、高效和数据的一致性。
|
26天前
|
安全 API 数据安全/隐私保护
常见的HTTP请求方法
【10月更文挑战第25天】这些HTTP请求方法共同构成了客户端与服务器之间交互的基础,使得客户端能够根据不同的需求对服务器资源进行各种操作。在实际应用中,开发者需要根据具体的业务场景和资源的性质选择合适的请求方法来实现客户端与服务器之间的有效通信。
|
1月前
|
存储 安全 网络协议
HTTP 请求方法
【10月更文挑战第22天】HTTP 请求方法
43 2
|
1月前
|
缓存 JSON 安全
HTTP请求发送方法
HTTP请求发送方法【10月更文挑战第22天】
37 2

热门文章

最新文章

下一篇
无影云桌面