二、Tauri 使用（http请求 axios）

1.启用该功能

        在tauri.conf.json文件中启用该功能，配置要请求的API路径，多个API的情况使用逗号隔开就可以了

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

2.axios-tauri-api-adapter

        如果请求接口使用的是axios，需要使用第三方插件 axios-tauri-api-适配器 ，否则打包后的项目无法请求到接口，这里更推荐使用官方的http请求

        ①安装

npm install axios-tauri-api-adapter

        ②导入

import axios from 'axios';
import axiosTauriApiAdapter from 'axios-tauri-api-adapter';

        ③使用

const client = axios.create({ adapter: axiosTauriApiAdapter });

3.封装http

        开发环境不需要使用 adapter: axiosTauriApiAdapter ，注释即可；生产环境需要使用 adapter: axiosTauriApiAdapter

        index.ts

import axios from 'axios';
import axiosTauriApiAdapter from 'axios-tauri-api-adapter';
import { message } from 'ant-design-vue';
​
const http = axios.create({
    // 本地请求服务端
    baseURL: 'http://127.0.0.1:8001/api/v1/',
    timeout: 10000,
    headers: {
        Accept: 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
    },
    adapter: axiosTauriApiAdapter,
});
​
// 添加请求拦截器
http.interceptors.request.use(
    (config) => {
        // 在发送请求之前做些什么
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);
​
// 添加响应拦截器
http.interceptors.response.use(
    (response) => {
        // 2xx 范围内的状态码都会触发该函数
        return response;
    },
    (error) => {
        const { response } = error;
        if (response) {
            // 请求已发出，但是不在2xx的范围
            return Promise.reject(response.data);
        } else {
            message.warning('网络连接异常,请稍后再试!');
        }
    }
);
​
export function request<T>(data: any): Promise<T> {
    return new Promise((resolve, reject) => {
        const promise = http(data);
        //处理返回
        promise
            .then((res) => {
                resolve(res.data);
            })
            .catch((err) => {
                reject(err.data);
            });
    });
}