在React如何使用axios实现前后端交互及基本页面布局

1、前言

之前我们已经介绍了如何：新建一个react项目，并介绍了基本的路由配置、less、以及ui的使用。
接下来将会介绍在React如何使用axios实现前后端交互。在之前的文章中，我有详细介绍：axios的使用和二次封装，原理基本相同。

2、依赖和配置

安装依赖

cnpm i -S qs axios

在新建src下新建api文件夹,配置和之前axios的使用和二次封装基本相同，考过了稍加修改即可。

import axios from 'axios'
import qs from 'qs'
let fetch = axios.create({
    baseURL: "http://localhost:3333", // 这里是本地express启动的服务地址
    timeout: 5000 // request timeout
})
fetch.interceptors.request.use(config => {
    if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
        if (typeof(config.data) !== 'string' && config.headers['Content-Type'] !== 'multipart/form-data') {
            config.data = qs.stringify(config.data)
        }
    }
    return config
}, error => {
    Promise.reject(error)
})

fetch.interceptors.response.use(async data => {
    return data
}, error => {
    if (error.response) {
        if (error.response.status === 500) {
            console.log('服务器错误，请联系管理员处理')
        }
        return Promise.reject(error.response.data)
    } else {
        return Promise.reject(error)
    }
})

export default fetch

新建index.js文件, 这里我们模拟了两个接口。用于登录检验和获取控制台的菜单数据，跳转到对应的控制台(后续会介绍相关的部分)

import fetch from './fetch'

// example 获取数据json模拟
export function apiGetData() {
    return fetch({
        url: '/api/data/menu-list',
        method: 'get'
    })
}

// 登录校验
export function apiLogin(params) {
    return fetch({
        url: '/api/login/validate',
        method: 'get',
        params
    })
}

3、在页面中使用

这里我们就以登录页面和控制台页面为例。新建登录页面，配置路由，首页增加点击跳转登录的按钮。

import { apiLogin } from '@/api';

2. 这里我们登录页的布局是没有头部底部的，所有路由独立在DefalultLayout之外。 3. 这里在稍微提一下布局，在上一章创建react项目中我们没有引入antd的时候，自己实现了DefalultLayout布局，现在引入antd之后，可以借助Layout布局组件来ConsoleLayout布局。如图中的控制台布局：

总结

本文主要介绍在react中如何封装并使用axios，这个在vue中axios的按需引用axios的使用和二次封装的原理相同。
简单介绍了借助ui和不借助ui来实现页面布局。
后续会继续更新redux等部分、逐渐的形成一个完成的项目。