umi-request 网络请求(基于React)

时间:2025-01-15 07:06:37

Umi 内置了一个 umi-request 插件来实现网络请求。该插件内部是基于 fetch 进行封装的。

我们在 umi 项目中,可以选择使用内置的 umi-request,也可以单独下载 axios。

一、基本使用

import request from 'umi-request';

export const getPlayListAsync = () => request.get('http://localhost:3000/personalized');

二、传参语法

1、get 请求
request.get('请求路径', {
    params: {
        参数名: 参数值
    }
})
2、post 请求
request.post('请求路径', {
    data: {
        参数名: 参数值
    }
})

三、封装

在 umi 项目的 src 目录中创建一个 utils 目录,在 utils 目录中再创建一个 文件,来对 umi-request 进行封装:

import { extend } from 'umi-request';

const request = extend({
    // 路径前缀(基础路径)
    prefix: 'http://localhost:3000',
    // 路径后缀
    // suffix: '?id=1',
    // 请求超时时间:请求超过 3s 还未结束的话,就自动断开并报错
    timeout: 3000,
    // headers: {}
})

export default request;