【React.js 15】axios基础知识

2018-04-03 本文已影响97人 IUVO

本文需要结合前几篇讲述Express入门，MongoDB入门以及Express连接MongoDB的文章，还未看过的，请先移步去看看。

启动Express服务和MongoDB服务，并且二者连接上，先在数据库中做一些数据，方面后面调试。
安装

npm install axios --save

设置代理
因为Express服务在9093端口，而React服务在3000端口，所以要实现跨域请求，就要配置proxy，在package.json中添加：

"proxy": "http://localhost:9093"

不使用Redux的请求数据：

constructor(){
  super()
  this.state={
    data:{}
  }
}
componentDidMount(){
  //axios.get()方法本质是一个Promise对象，所以用.then语法设置回调的函数
  axios.get('/data').then(res=>{
    if (res.status==200) {
      console.log(res)
      this.setState({
        data : res.data
      })
    }
  })
}

使用Redux的请求数据：
既然是管理数据，那么请求数据就要在对应的Redux里面去执行请求。
对应新的事件建立新的action.type：

const USERDATA = 'userData'

把请求封装在一个对外暴露的方法中，且因为是异步执行的，所以action的返回值需要时一个函数：

export function getUserData () {
  // dispatch用来通知数据修改
  return dispatch=>{
    axios.get('/data').then(res=>{
      if (res.status===200) {
        console.log(res.data)
        dispatch(userData(res.data))
      }
    })
  }
}

同时需要一个修改数据的事件，把类型和data传给dispatch去执行：

export function userData (data) {
  return {type:USERDATA,payload:data}
}

在reducer当中新增对应类型事件的处理：

export function authReducer(state = initState,action){
  console.log(state,action);
  switch (action.type) {
    case LOGIN:
      return {...state,isAuth:true}
    case LOGOUT:
      return {...state,isAuth:false}
    case USERDATA:
      return {...state, age:action.payload.age, name:action.payload.name}
    default:
      return state
  }
}

请求的时机由组件去调用reducer暴露出的方法即可，这样就完成了一个Redux中请求的流程。

优化请求等待
请求一般都是耗时操作，所以会有一个等待时间，那么，提示框是提高应用友好度所必须的了。
现在我们来配置一下提示框，首先，每个请求我们都统一加载提示框，并且在请求的响应中对应的隐藏掉提示框，这里我们把这个提示框的单独剥离出来成一个文件config.js，利用interceptors拦截器拦截所有请求以及响应，并在当中实现提示框的逻辑：

import axios from 'axios'
import { Toast } from 'antd-mobile'
import 'antd-mobile/dist/antd-mobile.css'

//拦截所有请求
axios.interceptors.request.use(function(config){
  Toast.loading('加载中',0)
  return config
})

//拦截所有响应
axios.interceptors.response.use(function(config){
  Toast.hide()
  return config
})

在index.js中再去引入这个配置：

import './config'

这样每次加载就会有对应的提示框显示出来。
PS:因为请求的其实是本地，所以响应速度极快，可能看不到提示框，那么对提示框做点延时操作，就可以帮助我们更好的看到它：

axios.interceptors.response.use(function(config){
  setTimeout(
    ()=>{Toast.hide()},
    2000
  )
  return config
})

仅限于测试用，实际开发不能这样写。

上代码：
./src/Auth.redux.js

import axios from 'axios'

//管理登录验证相关的信息和事件
const LOGIN = 'login'
const LOGOUT = 'logout'
const USERDATA = 'userData'

const initState = {
  isAuth:false,
  name:'Guest',
  age:0
}

export function authReducer(state = initState,action){
  console.log(state,action);
  switch (action.type) {
    case LOGIN:
      return {...state,isAuth:true}
    case LOGOUT:
      return {...state,isAuth:false}
    case USERDATA:
      return {...state, age:action.payload.age, name:action.payload.name}
    default:
      return state
  }
}

export function getUserData () {
  // dispatch用来通知数据修改
  return dispatch=>{
    axios.get('/data').then(res=>{
      if (res.status===200) {
        console.log(res.data)
        dispatch(userData(res.data))
      }
    })
  }
}
export function userData (data) {
  return {type:USERDATA,payload:data}
}
export function loginAction() {
  return {type:LOGIN}
}
export function logoutAction() {
  return {type:LOGOUT}
}

【React.js 15】axios基础知识

Done!

猜你喜欢

热点阅读