使用UmiJS封装请求umi-request

根据文档做了一个极简单的封装,错误处理,中间件可以根据文档自行添加

请求代理在.umirc.js中配置proxy

// request.js

import {
          
    extend } from "umi-request";

const errmsgMap = {
          
   
    
}

const HttpRequest = function ({
          
   url, method, params}) {
          
   
    let config = {
          
   
        
        method, // 请求方式
        params: (method == GET || method == get) ? params : {
          
   }, // 如果是get请求使用 params
        data: (method == POST || method == post) ? params : , // 如果是post请求使用 data
        timeout: 5000,
        headers: {
          
   
            Content-Type: multipart/form-data,
        },
        prefix: , // 统一设置 url 前缀
        suffix: , // 统一设置 url 后缀

        errorHandler: function (error) {
          
   
            // 异常
            console.log(异常:, error);
            if (error.response) {
          
   
                
            }
            throw error.response  // 将错误抛出,可在catch中捕获错误
        }
    }
    console.log(url + 请求参数:, config);
    
    const request = extend(config)
    // 注意这里的请求地址
    return request(url)
}

export default HttpRequest;
// api.js

import HttpRequest from ./request

export default {
          
   
    testApi: () => HttpRequest({
          
   
        url: /api/v2/movie/in_theaters,
        method: get,
        params: {
          
   
            apikey: 0b2bdeda43b5688921839c8ecb20399b
        }
    })
}
// page页面调用

import {
          
    useEffect } from "react";

import api from "../../../api/api";


export default function CurrencyListPage() {
          
   
    
    useEffect(() => {
          
   
        api.testApi().then(res => {
          
   
            console.log(res);
        })
    })

    return (
        <div>列表</div>
    )
}
经验分享 程序员 微信小程序 职场和发展