react如何請求數據異步

這篇文章主要講解了“react如何請求數據異步”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“react如何請求數據異步”吧！

react請求數據異步的方法：1、通過“npm i redux-thunk --save npm i axios --save”命令下載thunk；2、在store.js里面引入thunk插件；3、在需要模塊的actionCreator里引入中間件“redux-thunk”即可。

react異步請求數據方法。

關于react異步請求數據有很多種方案。

1、saga （用了er6生成器函數）

2、promise

3、thunk

4、…

為什么要用插件??？是為了改造這個redux的action動作。如果異步的話，我們發動作，actionCreator只有返回對象，而異步這個插件能讓你隔一段時間再發這個動作，是為了改造動作用的。

本文用thunk，它可能不是最好的，但是是我用得比較習慣的。

一、下載

npm i redux-thunk --save
npm i axios --save

二、引用。在store.js里面引入插件，并使用。

import {createStore,applyMiddleware} from 'redux'   //引入applyMiddleware
import reducers from './reducers'  //總的reducer
import thunk from 'redux-thunk'   //引入thunk 
var store = createStore(reducer,applyMiddleware(thunk));  //使用中間件
export default store;

三、發數據

在你需要模塊的actionCreator里：

import axios from 'axios'
export default {
    getData(){
        return (dispatch)=>{   // 引入中間件redux-thunk后，就可以延遲發出動作
                axios.get('http://www.xmyxapp.com/api/tab/1?start=0').then((res)=>{
                    console.log(res)
                    dispatch({
                        type:'GETDATA',
                        list:res.data.data.items.list
                    })
                })
        }
    }
}

四、效果測試

在你需要的模塊里面的reducer：

var initState  ={
    list:[]
}
export const listReducer = (state = initState, action) => {
    var newState ={...state};
    switch (action.type) {
        case 'GETDATA':
            newState.list = action.list  // 這個action.list就是該模塊actionCreator里傳過來的值
            return newState;
        default:
            return state
    }
}

在store里面總和的reducers：

import {combineReducers} from 'redux'
import {listReducer} from '../components/list/reducer'
 var reducer = combineReducers({
     list:listReducer
 })
 export default reducer;

在你需要的模塊里面的組件：

import React, { Component } from 'react'
import {connect} from 'react-redux'
import actionCreator from './actionCreator';
 class List extends Component {
  componentDidMount(){
      this.props.getData();   // 調用異步方法獲取數據
  }
  render() {
      console.log(this.props);
    return (
      <div>
        <ul>
            {
                this.props.list.list.map((item)=>{
                    return item.title?<li key={item.id}>{item.title}</li>:""
                })
            }
        </ul>
      </div>
    )
  }
}
export default connect((state)=>state,actionCreator)(List);

感謝各位的閱讀，以上就是“react如何請求數據異步”的內容了，經過本文的學習后，相信大家對react如何請求數據異步這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！