1、前言
之前我们已经介绍了如何:新建一个react项目 ,并介绍了基本的路由配置、less、以及ui的使用。 接下来将会介绍在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、在页面中使用
这里我们就以登录页面和控制台页面为例。新建登录页面,配置路由,首页增加点击跳转登录的按钮。
import { apiLogin } from '@/api' ;
复制代码
2. 这里我们登录页的布局是没有头部底部的,所有路由独立在DefalultLayout之外。 3. 这里在稍微提一下布局,在上一章
创建react项目 中我们没有引入antd的时候,自己实现了DefalultLayout布局,现在引入antd之后,可以借助Layout布局组件来ConsoleLayout布局。如图中的控制台布局:
总结
本文主要介绍在react中如何封装并使用axios,这个在vue中axios的按需引用axios的使用和二次封装 的原理相同。 简单介绍了借助ui和不借助ui来实现页面布局。 后续会继续更新redux等部分、逐渐的形成一个完成的项目。