阅读 953

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

1、前言

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

2、依赖和配置

  • 安装依赖
cnpm i -S qs 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、在页面中使用

  1. 这里我们就以登录页面和控制台页面为例。新建登录页面,配置路由,首页增加点击跳转登录的按钮。
import { apiLogin } from '@/api';
复制代码

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

总结

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