接口请求处理
项目中没有使用 axios 等前端 HTTP 请求库,使用的是 Tauri 内置的 fetch 方法,但该方法使用比较简单,没有请求拦截器或响应拦截器相关配置,所以我们有必要在此基础上做下二次封装。
1. 配置安全域名
在 tauri.conf.json 里添加配置
"allowlist": {
"all": true,
"http": {
"scope": ["http://**", "https://**"]
},
"shell": {
"all": false,
"open": true
}
},
红框选中的内容是必须改的,不然会发生跨域:
2. 封装 http 请求
新建 utils/http.ts
文件
import { fetch } from '@tauri-apps/api/http'
const baseURL = `你的服务器地址`
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 http = (url: string, options: any = {}) => {
if (!options.headers) options.headers = {}
if (options?.body) {
if (options.body.type === BODY_TYPE.Form) {
options.headers['Content-Type'] = 'multipart/form-data'
}
}
options = { ...commonOptions, ...options }
return fetch(buildFullPath(baseURL, url), 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.简单实用
这里要注意,发送请求前,就要知道返回的数据类型:下面三种
不然会发生错误。
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
这是因为没有指定响应的数据类型,需要添加一下: 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)
}
请求到的数据: