umijs中简单使用umi-request

在umi.js4中使用umi-request进行网络请求，查看官网后还是没明白，便自己摸索一遍，如下把简单使用的过程记录下来，以便共享给其他需要的小伙伴做参考，如有不对的地方，烦请指出。

第一步：安装umi-request

npm install --save umi-request

第二步：简单封装使用

在自定义路径为src/utils/http.ts文件中写入如下代码进行网络请求封装。

import request from "umi-request";  //引入库使用

interface HttpOptions {
    header?: object;
    url: string;
    method: string;
    data?: any;
    params?: any;
    timeout?: number;
}

export const http = (options: HttpOptions) => {
    return new Promise((resolve, reject) => {
        request(options.url, {
            header: options.header || {
                'Content-Type': 'application/json',
            },
            method: options.method || "GET",
            data: options?.data,
            params: options?.params || null,
            timeout: options.timeout || 2000,
            skipErrorHandler: true,
            getResponse: false,
            requestInterceptors: [],
            responseInterceptors: []
        })
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })
    })
}

第三步：在封装接口中使用

如下代码示例：

import {http} from '../utils/http'; //引入封装的代码


/**
 * 登录
 */
export const login = (data: any) => {
    return http({
        url: '/api/login',
        method: 'post',
        data: data
    });
}

第四步：在页面代码中使用

import {useEffect, useState} from "react";
import {login} from "@/services/auth";

export default function HomePage() {
    const [result, setResult] = useState<any>(null);
    useEffect(() => {
        login({}).then((res) => {
            setResult(res);
            console.log("res:", res);
        })
    }, []);
    return (
        <div>
            <h2>Yay! Welcome to umi!</h2>
        </div>
    );
}

至此，即可完成简单的封装和使用了