[JavaScript知识库]react中axios的简单配置

新建 fetch文件

• 新建 config.js

 // axios的配置文件, 可以在这里去区分开发环境和生产环境等全局一些配置
const devBaseUrl = 'http://api.k780.com/'
const proBaseUrl = 'http://xxxxx.com/'

// process.env返回的是一个包含用户的环境信息,它可以去区分是开发环境还是生产环境
console.log(process.env)
export const BASE_URL =  process.env.NODE_ENV === 'development' ? devBaseUrl : proBaseUrl

export const TIMEOUT = 5000

• 新建 index.js

 // 封装后的axios
import axios from 'axios'
import { BASE_URL, TIMEOUT } from './config'

const instance = axios.create({
    baseURL: BASE_URL,
    timeout: TIMEOUT
})

// 请求拦截器 在发起http请求之前的一些操作
// 1、发送请求之前，加载一些组件
// 2、某些请求需要携带token，如果说没有没有携带，直接跳转到登录页面
instance.interceptors.request.use((config) => {
    console.log('被拦截做的一些操作')
    return config
}, err => {
    return err
})

// 响应拦截器
instance.interceptors.response.use((res) => {
    return res
}, err => {
    if (err && err.response) {
        switch(err.response.status) {
            case 400:
                console.log('请求错误')
                break
            case 401:
                console.log('未认证')
                break
            default:
                console.log('其他信息错误')
        }
    }
})

export default instance

使用

import React, { memo, useState, useEffect } from 'react'
import { Card, Table } from 'antd'
import $axios from '../../../axios'

export default memo(function Index() {
    const [data, setData] = useState()

    useEffect(() => {
        // 请求接口
        const fetchData = async () => {
            const { data } = await $axios.get('http://localhost:3001/user')
            console.log(data)
            const { user } = {...data}
            setData(user)
        }
        fetchData()
    }, []) // 传入一个空数组让它只渲染一次

    const columns = [
        {
            title: 'id',
            dataIndex: 'id'
        },
        {
            title: '姓名',
            dataIndex: 'name'
        },
        {
            title: '年龄',
            dataIndex: 'age'
        },
        {
            title: '性别',
            dataIndex: 'isMale',
            // 生成复杂的数据渲染函数
            render(isMale) {
                return isMale ? '男' : '女'
            }
        },
        {
            title: '地址',
            dataIndex: 'address'
        },
        {
            title: '联系方式',
            dataIndex: 'phone'
        }
    ]

    return (
        <div>
            <Card title='基础表格'>
                <Table dataSource={data} columns={columns} pagination={false} />
            </Card>
        </div>
    )
})