uni-app x uni.request类型定义

uni-app x uni.request类型定义

代码示例

uni.request<RegeocodeResponse>({
    url: `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${state.long},${state.lat}&key=${'a61f26ba215628398d0a872a6d73fe0d'}&radius=1000&extensions=all`,
    success: (res: RequestSuccess<RegeocodeResponse>) => {
        // console.log(res.data?.regeocode.addressComponent.city);
    },
    fail: (error) => {
        console.log(error)
    }
})

注意事项

  • Android平台通过uni.request发起请求时，在不定义类型即any情况下可以获取到data但无法访问其中的数据。
  • 添加泛型后，uni.request可能因JSON解析失败而报错。

更多关于uni-app x uni.request类型定义的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app x uni.request类型定义的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，uni.request 是一个用于发起网络请求的 API，它允许你向服务器发送 HTTP 请求并获取响应数据。为了在使用 TypeScript 时获得更好的类型提示和错误检查，你可以为 uni.request 的参数和返回值定义类型。

以下是一个如何为 uni.request 定义类型的示例，包括请求参数和响应数据的类型定义：

// 定义请求方法的枚举类型
enum RequestMethod {
    GET = 'GET',
    POST = 'POST',
    PUT = 'PUT',
    DELETE = 'DELETE',
    // 可以根据需要添加更多方法
}

// 定义请求参数的类型
interface RequestOptions {
    url: string;
    method?: RequestMethod;
    data?: any;
    header?: { [key: string]: string | number | boolean };
    timeout?: number;
    // 可以根据需要添加更多选项
}

// 定义响应数据的类型
interface ResponseData<T> {
    data: T;
    statusCode: number;
    header: { [key: string]: string | number | boolean };
    [key: string]: any; // 允许其他可能的属性
}

// 定义uni.request的返回类型（Promise）
function uniRequest<T>(options: RequestOptions): Promise<ResponseData<T>> {
    // 注意：这里的实现只是模拟，实际的uni.request调用不需要修改
    return new Promise((resolve, reject) => {
        // 模拟一个异步请求
        setTimeout(() => {
            // 假设服务器返回了一个状态码和响应数据
            const statusCode = 200;
            const responseData: any = {
                message: 'success',
                data: {
                    // 这里应该是你期望的响应数据类型
                    // 例如，如果服务器返回的是一个用户对象，你可以这样定义：
                    // id: 1,
                    // name: 'John Doe',
                    // ...
                } as T,
            };

            const response: ResponseData<T> = {
                data: responseData,
                statusCode: statusCode,
                header: {}, // 这里应该包含实际的响应头信息
            };

            // 根据状态码决定是resolve还是reject
            if (statusCode === 200) {
                resolve(response);
            } else {
                reject(new Error('Network request failed'));
            }
        }, 1000); // 模拟1秒的延迟
    });
}

// 使用示例
uniRequest<{ id: number; name: string }>({
    url: 'https://example.com/api/user',
    method: RequestMethod.GET,
}).then(response => {
    console.log(response.data.id);
    console.log(response.data.name);
}).catch(error => {
    console.error(error);
});

请注意，上面的 uniRequest 函数仅用于演示类型定义，并没有真正调用 uni.request。在实际应用中，你应该直接使用 uni.request 并结合上述类型定义来增强你的代码类型安全性。

回到顶部