react的umi hooks的useRequest 和 axi

一、封装axios

src/utils/request.ts：

import axios from 'axios';

const service = axios.create({
    baseURL: '/api/test',
    timeout: 15 * 1000
})

// http request 拦截器
service.interceptors.request.use(
    config => {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
        return config
    },
    err => {
        return Promise.reject(err);
    })

service.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        // if (error.response) {
        //     switch (error.response.status) {
        //         case 400:
        //         case 401:
        //             break;
        //         case 404:
        //             break;
        //         case 405:
        //             break;
        //         case 500:
        //             break;
        //         default:
        //             ;
        //     }
        // } else {}
        // alert('请求接口失败，请联系管理员');
        return Promise.reject(error) // 返回接口返回的错误信息
    })

export default service

有没有发现，不论拦截到的接口返回结果是成功还是失败，我们仍然返回了个Promise对象

二、具体调用步骤

import React, { useState } from 'react';
import { useToggle, useMount } from '@umijs/hooks';
import { useRequest } from "@umijs/hooks";
import request from '@/utils/request.ts';

export default () => {
    const { state: show, toggle: setShow } = useToggle(false);

    // 没错就是这么简单，返回一个Promise对象
    function getBasic(): Promise<any> {
        return request('/getConfig');  // 实际上调用的完整api为 /api/test/getConfig
    }

    const { run: runGetBasic } = useRequest(getBasic, {
        manual: true,
        onSuccess: (res) => {
            // 这是接口定义的业务判断，与本文无关
            if (res.data.status) {
                // 成功了就让show值为true
                setShow(true)
            } else {
                alert(res.data.info);
            }
        }
    });

    // 在组件首次渲染时，执行方法。
    useMount(
        () => {
            runGetBasic();
        }
    );

    return (
      <div>{ show }</div>
    )
}

三、相关文档

• Umi Hooks - useMount
• Umi Hooks - useToggle
• Umi Hooks - useRequest