【Tauri2.0教程（五）】前端调用rust方法

本文主要讲述如何通过前端触发后端rust方法的调用。

安装依赖

npm install @tauri-apps/api

定义后端方法

在src-tauri/src/lib.rs中定义需要的方法。

#[tauri::command]
fn open_file() {
    println!("I was invoked from JavaScript!");
}

// 返回数据
#[tauri::command]
fn return_data() -> String {
    "hello return data".into()
}

// 接收入参并返回数据
#[tauri::command]
fn login(user: String, password: String) -> Result<String, String> {
    if user == "tauri" && password == "tauri" {
        // resolve
        Ok("logged_in".to_string())
    } else {
        // reject
        Err("invalid credentials".to_string())
    }
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())
        // 注册上面定义的open_file, return_data, login方法
        .invoke_handler(tauri::generate_handler![open_file, return_data, login])
        .setup(|app| {
            if cfg!(debug_assertions) {
                app.handle().plugin(
                    tauri_plugin_log::Builder::default()
                        .level(log::LevelFilter::Info)
                        .build(),
                )?;
            }
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

前端

前端引用后端方法，并调用

import { invoke } from '@tauri-apps/api/core';
async function openFile() {
  // 调用open_file方法
  await invoke('open_file');

  // 异步调用login方法，并传递参数和处理返回值
  invoke('login', {user: 'tauri', password: 'tauri'})
      .then((message) => console.log(message))
      .catch((error) => console.error(error));
  //异步调用return_data方法并处理返回参数
  invoke('return_data')
      .then((data) => console.log(data))

}

其他问题

后端方法响应时间过长，导致前端UI页面卡住，出现未响应的情况。 上面代码可以看到，有的方法是异步调用的，有的方法是同步调用的，但是不管前端异步还是同步调用，后面都会发现，如果后端方法响应慢，整个页面都会卡住。

这个时候需要将后端rust方法也改成异步的。

// 接收入参并返回数据 async 标识异步方法
#[tauri::command]
async fn login(user: String, password: String) -> Result<String, String> {
    if user == "tauri" && password == "tauri" {
        // resolve
        Ok("logged_in".to_string())
    } else {
        // reject
        Err("invalid credentials".to_string())
    }
}