前后端联调:在react中使用node
- 使用axios发送异步请求
- npm install axios –save
- 端口不一致(跨域,ajax不支持),如何发送,使用proxy配置转发
- 在package.json数据中添加”proxy”: “转发到的地址”
- axios拦截器,统一loading处理
- redux里使用异步数据,渲染页面
import axios from 'axios'
import { Toast } from 'antd-mobile'
axios.interceptors.request.use(function(config) {
Toast.loading('加载中', 0)
return config
})
axios.interceptors.response.use(function(config) {
Toast.hide()
return config
})
import { axios } from 'axios'
const Login = 'login'
const Logout = 'logout'
const UserData = 'userData'
const initState = {
isAuth: false,
user: 'lmh',
age: 18
}
export function auth(state=initState, action) {
switch(action.type) {
case Login:
return {...state, isAuth: true}
case Logout:
return {...state, isAuth: false}
case UserData:
return {...state, user: action.payload.user, age: action.payload.age}
default:
return state
}
}
export function login() {
return {type: Login}
}
export function logout() {
return {type: Logout}
}
export function asynGetUserData() {
return dispatch => {
axios.get('/data')
.then(res => {
if(res.status == 200) {
dispatch(userData(res.data))
}
})
}
}
export function userData(data) {
return {type: UserData, payload: data}
}
import React from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { login, asynGetUserData } from "./auth.redux";
@connect(
state => state.auth,
{login, asynGetUserData}
)
class Auth extends React.Component {
componentDidMount() {
this.props.asynGetUserData()
}
render() {
return(
<div>
<h2>我的名字是{this.props.user}, 年龄是{this.props.age}</h2>
{this.props.isAuth ? <Redirect to='/dashbord/' /> : null}
<h3>还未登录,请点击登录</h3>
<button onClick={this.props.login}>登录</button>
</div>
)
}
}
export default Auth