后台项目-mockjs的使用

前言

有很多东西都是看了别人用之后才发现原来可以这样搞，逻辑清晰的代码总是令人心情愉悦。这篇文章就来记录一下mockjs的使用。

1.mockjs简介

mockjs是用来拦截ajax请求，使得前端可以不依赖后端独立开发的工具

安装npm install mockjs

根据官网，mockjs最主要的函数是`Mock.mock(rurl, rtype, function( options ) / template）

• rurl是一个正则，用于匹配url
• rtype是请求类型，例如get/post
• 第三个参数有两种形式，一种是一个函数，另一种是mock的数据模板

2.使用mockjs

因为Mock.mock()的第三个参数有两种可能，所以我们需要一个方法来让着两种参数统一一下，并对传入的url做一些处理。

function twoMockData(response){
  //options是指向本次请求的 Ajax 选项集，含有 `url`、`type` 和 `body` 三个属性
  return function(options){    
    if(response instanceof Function){
      let {type,url,body} = options
      return response({
        method:type,
        body: JSON.parse(body),
        query: param2Obj(url)
      })
    }
    return response
  }
}
//reqs是所有拦截的对象
reqs.forEach((item)=>{
  Mock.mock(item.url,item.type,twoMockData(item.response))
})

//解析get请求url中的参数
export function param2Obj(url){
  let search = decodeURIComponent(url.split('?')[1])
  if(!search){
    return {}
  }else{
    let res = {}
    let searchArr = search.split('&')
    searchArr.forEach((item)=>{
      let index = item.indexOf('=')
      if(index){
        res[item.slice(0,index)] = item.slice(index+1)
      }
    })
    return res
  }
}

接下来就是把不同类型的api分到不同的文件，每个文件export一个对象数组。每个对象有三个属性：

• url：匹配url的正则，如//user/userInfo.*/
• type：请求类型，例如get/post
• response：响应的数据模板或者一个函数

正好对应Mock.mock的三个参数，下面是一个例子

{
    url: '/user/login',
    type: 'post',
    response: config => {
      const { username } = config.body
      const token = tokens[username]

      if (!token) {
        return {
          code: -1,
          message: 'error'
        }
      }

      return {
        code: 0,
        data: token
      }
    }
  },

不得不说当把代码这样分解之后，整个结构非常清晰。不同的文件负责不同的事情，当你遇到bug的时候也不会向无头苍蝇一样到处乱找，而且增删改查都异常方便。

比如我想添加一些关于文章的api，我只需要新建一个名为article.js的文件夹，然后为每一种url写一个对象，和文章相关的所有内容都直接写这里面，之后再在主文件里引入一下就好。