项目中模拟服务器响应与实现异步请求(react)

前后端分离

mock.js

    最近在写一个用react全家桶开发的项目时，由于项目部分功能需要向后台 请求数据，所以在项目中引入了 mock.js。

    首先，简单说说什么是mock.js： 

            mock.js是一款前端开发中，拦截ajax请求，生产随机数据来模拟服务器响应的工具。有了它，我们就可以脱离后端进行开发，通过自己写模拟数据，给代码中的ajax请求返回所需结构的数据，从而很方便的检测代码功能是否正确。在最后代码投入使用的时候，我们只需要把代码中mock.js的部分删掉就可以了。

关于mock的学习，大家可以进入一下官方网页进行学习： mock.js

下面给出一个简单的例子

       

Mock.mock(/\.json/, {
   'list|1-10': [{
        'id|+1':1,
        'email': '@EMAIL'
   }]
})

这里的意思是，当你向服务端请求json文件的时候，mock会拦截你的ajax请求，然后返回一个拥有1~10个元素的对象数组，对象保护 id 和 email 两个属性，比如：

 

{
    "list": [
        {
            "id": 1,
            "email": "r.deijzc@grxgpmhq.uk"
        },
        {
            "id": 2,
            "email": "i.wwoevu@xuvqsos.pl"
        },
        {
            "id": 3,
            "email": "x.tudiq@oznwjwxiv.lk"
        },
        {
            "id": 4,
            "email": "b.jabhvgwqg@fqbiksmiht.cm"
        },
        {
            "id": 5,
            "email": "z.fijxqehvb@neqgnbto.af"
        }
    ]
}

   看不懂没关系，大家可以点击上面的网址进入mock官网进行学习。

    需要注意的是，mock.js虽然提供了大量的Mock API，但是也仍然无法发出真实的网络请求，模拟真实度不够，另外这种方式还存在一些不足，因为是对XHR对象的改写，有些情况下兼容性不是很好，比如IE8等低版本的浏览器，还有较新的Fetch API也拦截不到。

react项目中的异步请求

        在用react开发的项目中，我们通常需要用到react-redux进行数据的管理，为了在项目中引用了redux的情况下，对store中的数据进行异步操作，比如ajax请求等。我们需要引入 中间件。可能大家会疑惑，什么是中间件呢？其实很简单，中间件就是一个函数，对 store.dispatch 方法进行改造，在发出Action和执行Reducer这两步之间，添加了其他功能。

        这次，我引入的中间件是 redux-thunk ，该中间件的作用是改造store.dispatch()，使得它能够接受一个函数作为参数，首先，我们要下载 redux-thunk ，在项目根目录下：

npm install --save redux-thunk

下载redux-thunk到项目中。

        然后，我们需要这样引入一个中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

      在这里，我们看到，为了引入 redux-thunk ，我们需要使用到方法 applyMiddleware，这个方法是干嘛的呢？这个方法是把所有用到的中间件，放进一个数组中，然后依次执行，中间件的内部可以拿到getState和dispatch这两个方法。

      因为现在由于 redux-thunk的作用，我们的dispatch已经可以接受函数了，所以我们的action creator也需要做一点改变，将我们的异步操作写入到action里面，比如下面是我项目中的代码：

export const axiosGet = (url:string) => (dispatch:any, getState:any) => {
    return getData(url)
    .then(response =>dispatch(initFirstFloor(response.data.array)))
}

     因为在项目中我使用了axios向服务器请求数据，所以必须使用aysnc action，代码中getData(url）为一个ajax请求，因为 applyMidleware(thunk)的作用，我们可以拿到dispatch与getState这两个方法，可以看到，我们先执行了一次ajax请求，请求完毕后用请求得到的数据去触发一次新的dispatch去修改我们的store.state。我们只需要执行store.dispatch（axiosGet（url））就可以执行这个异步的action了。