ant.design实践手札之---ajax数据调用

太过爱你忘了你带给我的痛 2022-07-11 08:12 222阅读 0赞

今天正好在弄项目的ajax数据调用情况，趁热打铁记录下

## 实际的运行步骤状态 ##

1、创建一个对应的对象model、service、routes、mock作为一个简单的ajax的准备工作

/src/models/note.js

import { query } from '../services/note';
    export default {
    
      namespace: 'note',
    
      state: {
        foo:'open',
      },
    
      subscriptions: {
    
      },
    
      effects: {
    
        *query({ payload }, { call, put }){
           const { data } = yield call(query);
           if(data.success) {
             yield put({
               type: 'querySuccess',
               payload: {
                 foo: data.data[1],
               }
             })
           }else{
    
             alert(data.message);
           }
         },
      },
    
      reducers: {
        // 使用服务器数据返回
        querySuccess(state, action){
          return {...state, ...action.payload, loading: false};
        },
      },
    
    };

/src/routes/note.js

import React from 'react';
    import { connect } from 'dva';
    import { Button } from 'antd';
    import { routerRedux } from 'dva/router';
    
    function Note({dispatch,note}) {
     const {
        foo
      } = note;
      return (
        <div >
             <Button type="primary" onClick={
       (value)=>{
                     dispatch({
                          type: 'note/query',
                          payload: {
    
                          },
                       })
                      }
                     }
             >{foo}</Button>
    
        </div>
      );
    }
    
    
    
    export default connect(({note})=>({note}))(Note);

/src/services/note.js

import request from '../utils/request';
    
    export async function query() { 
    
      return request('/api/notes');
    }

/mock/note.js

'use strict';
    
    module.exports = {
    
      'GET /api/notes': function (req, res) { 
        setTimeout(function () { 
          res.json({
            success: true,
            data: ['foo', 'bar'],
          });
        }, 500);
      },
    
    };

2、注册路由和model  
/src/router.js

import React from 'react';
    import { Router, Route } from 'dva/router';
    import IndexPage from './routes/IndexPage';
    import Note from './routes/Note';
    
    function RouterConfig({ history }) { 
      return (
        <Router history={history}>
          <Route path="/" component={IndexPage} />
          <Route path="/note" component={Note} />
        </Router>
      );
    }
    
    export default RouterConfig;

/src/index.js

import dva from 'dva';
    import './index.css';
    import './index.html';
    // 1. Initialize
    const app = dva();
    
    // 2. Plugins
    // app.use({});
    
    // 3. Model
     app.model(require('./models/example'));
     app.model(require('./models/note'));
    
    // 4. Router
    app.router(require('./router'));
    
    // 5. Start
    app.start('#root');

实现代码已经贴出，下面介绍下处理流程

项目启动访问[http://localhost:8989/\#/note][http_localhost_8989_note] 可以看到本测试页面只有一个按钮。  
先介绍先当前页面的一个数据互通的过程页面和mode公用一个state  
`state: { foo:'open', },`

ajax的作用就是刷新当前state的值

ajax的发起是由当前按钮发起， 实现的是按钮上的文字的转换

onClick={(value)=>{
           dispatch({
              type: 'note/query',
              //这个位置的type对应是ajax发起的地址，对应的是model的effects中的一个方法，访问方法是modelName/methodName
              payload: {
               },
              //payload 是用来承载请求参数的
           })
         }
      }

下面来看model

effects: { 
    
     *query({ payload }, { call, put }){ const { data } = yield call(query); //这个是没有任何参数的时候的写法 const { data } = yield call(query,parse(payload)); //这个是请求有参数的时候的写法 **以下是返回数据的处理过程** if(data.success) { yield put({ type: 'querySuccess', //这个type对应的是reducers中的一个方法 payload: { //在这个位置给state赋值 foo: data.data[1], } }) }else{ alert(data.message); } }, }, reducers: { // 使用服务器数据返回 querySuccess(state, action){ //两种写法都是用来将服务器的数据刷新到页面中 return {...state, ...action.payload, loading: false}; return {...state, ...action.payload,total: action.payload.total loading: false}; }, },

下面再详细解释下call发起请求的部分

import { query } from '../services/note';
    //这个query是对应的services中的一个方法，这个就是call发起请求的第一个参数，通过它对应的去service中寻找对应的ajax的请求

import request from '../utils/request';
    //引入request工具包，这个是真正发起ajax的地方
    export async function query() { 
    
      return request('/api/notes');
    }

下面介绍下request

//service中发起的请求会在这个位置处理如果需要重写ajax的调用模式的话重写这个地方即可
    export default function request(url, options) {
    
      return fetch(url, options)
        .then(checkStatus)
        .then(parseJSON)
        .then(data => ({ data }))
        .catch(err => ({ err }));
    }

这个位置曾经遇到的一个bug是请求发起的时候不会携带上cookie  
解决方案

export default function request(url, options) {
        let new_options = {
          ...options,
          credentials: 'include',
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        };
        return fetch(url, new_options)
            .then(checkStatus)
            .then(parseJSON)
            .then((data) => ({ data })) .catch(err => ({ err })); }

至此一个ajax的请求就介绍完了

[http_localhost_8989_note]: http://localhost:8989/#/note