AntDesign(React)學習-10 Dva 與后台數據交互

明天正式在線辦公沒時間學習了，今天晚上再更新一篇，

代碼提交一次：https://github.com/zhaogaojian/jgdemo

1、src下創建services目錄

創建文件userSrv.ts

export async function query(): Promise<any> {
    return request('user/getuserinfo');
  }

import axios from "axios"
export default async function request (options) {
    let response
    try {
        response = await axios(options)
        return response
    } catch (err) {
        return response
    }
}

注意如果未安裝axios，請安裝axios

yarn add axios

 

 

 3、User.tsx增加一個按鈕

<Button type="primary" style={{marginTop:10,width:300}} onClick={this.handleReadFromSrvClick}>從服務端讀取</Button>

 

 

this.props.UserInfo標紅線可以改成

(this.props as any).UserInfo

 

4、事件，不需要傳參數的話，payload可以不填內容

 handleReadFromSrvClick = e => {
    this.props.dispatch({
      type:"User/getUserInfo",
      payload:null
    })
    console.log('click: ', e);
  };

5、models目錄下的 user.ts中增加如下代碼

import {  query as queryUser } from '@/services/userSrv';

注意:下面effects不需要再使用queryUser.query

 effects:
    {
        *getUserInfo(_, { call, put }) {
            const response = yield call(queryUser);
            //yield console.log(response.data);
            yield put({
              type: 'User/updateUserState',
              payload: response.data,
            });
          }
        
    }

 注意：這里type直接改成"updateUserState"即可，不需要加User.

 6、mock 增加user.ts

export default {
    '/user/getuserinfo': {UserInfo:{
        username:"李四"
    }}
  };
  

7、運行效果

 

 點擊從服務端讀取，姓名變成了李四，達到預期效果

 8、不分層與后台數據交互方法請參考

https://www.cnblogs.com/zhaogaojian/p/12238299.html

 

公司產品已經上了企業微信疫情專區，為疫情防控盡一份薄力。