vue mock 模拟后端api接口

曾经终败给现在 2022-10-29 11:30 272阅读 0赞

# 模拟ajax响应 #

## 安装插件 ##

axios 是对 ajax 请求的封装  
对于 ajax 请求，使用 mockjs 插件来模拟后端响应

npm install axios --save
    npm install mockjs --save-dev

## 配置环境 ##

修改 `config/dev.env.js`，添加 MOCK 变量，值为 true

'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, { 
      NODE_ENV: '"development"',
      MOCK: 'true'
    })

修改 `config/prod.env.js`，添加 MOCK 变量，值为 false

'use strict'
    module.exports = { 
      NODE_ENV: '"production"',
      MOCK: 'false'
    }

## 绑定全局 ##

在 `src/main.js` 文件中，将 axios 组件绑定到 Vue 上，并且配置只有在 debug 模式，即 `npm run dev` 的情况下，才引入 Mock

import axios from 'axios'
    process.env.MOCK && require('@/mock')
    
    Vue.prototype.$http = axios

## 杜撰 Mock 数据 ##

import Mock from 'mockjs'
    
    const Random = Mock.Random
    const GET = 'get'
    // const POSt = 'POST'
    const msg = '成功'
    let articles = []
    for (let i = 0; i < 10; i++) { 
      let article = { 
        id: Random.id(),
        title: Random.csentence(10, 20),
        icon: Random.dataImage('100x100', 'Article Icon'),
        author: Random.cname(),
        date: Random.date() + ' ' + Random.time()
      }
      articles.push(article)
    }
    
    // 设置请求延时时间
    Mock.setup({ 
      timeout: 1000,
      debug: false
    })
    
    Mock.mock(/test/, GET, (req) => { 
      return { 
        code: 0,
        msg
      }
    })
    
    // mockjs暂不支持获取路径变量，因此只能自己提取
    // 该函数可以实现获取所有文章（article），或根据id获取单条文章（article/:id）两种接口
    Mock.mock(/article/, GET, (req) => { 
      const path = 'article'
      const url = req.url
      const index = url.lastIndexOf(path) + path.length + 1
      if (index < url.length) { 
        const id = url.substring(index)
        const filterData = articles.filter(item => {  return item.id === id })
        if (filterData.length > 0) { 
          return { 
            code: 0,
            msg,
            data: filterData[0]
          }
        } else { 
          return { 
            code: -1,
            msg: '文章不存在'
          }
        }
      } else { 
        return { 
          code: 0,
          msg,
          data: articles
        }
      }
    })

## 请求方法 ##

在 App.vue 中添加具体请求方法

注意：`'err' is declared but its value is never read.`，err已被全局定义，且是只读的，所以必须换个名字

## 输出结果 ##

![在这里插入图片描述][20210215094631954.png]

# 模拟fetch响应 #

## 安装插件 ##

由于 mockjs 只能模拟 ajax 请求，而对fetch请求无法拦截修改，因此需要 **额外引入** mockjs-fetch 插件，对 mock 对象进行改造

npm install mockjs --save-dev
    npm install mockjs-fetch --save

## 封装工具 ##

首先对于fetch做一个简单的封装 `src/utls/myFetch.js`

let baseUrl = ''
    
    /** * 设置基础url * @param {string} url 基础baseUrl */
    function setBaseUrl (url) { 
      baseUrl = url
    }
    
    /** * 对象转字符串 * @param {object} obj 参数对象 */
    function obj2Str (obj) { 
      // let idx = 0
      // let arr = []
      // for (let item in obj) { 
      // arr[idx++] = [item, obj[item]]
      // }
      // return new URLSearchParams(arr).toString()
      return Object.keys(obj).map(it => it + '=' + obj[it]).join('&')
    }
    
    /** * 真正的请求 * @param {string} url 请求地址 * @param {object} options 请求参数 * @param {string} method 请求方式 */
    function doFetch (url, options = { }, method = 'GET') { 
      url = baseUrl + url // 如果设置过基础地址，要先进行拼接
      method = method.toUpperCase() // 统一转成大写，方便后续判断
      const searchStr = obj2Str(options)
      let initObj = { }
      if (method === 'GET') { 
        if (searchStr.length > 0) url = url + '?' + searchStr
        initObj = { 
          method: method,
          credentials: 'include' // 强制加入凭据头
        }
      } else { 
        initObj = { 
          method: method,
          credentials: 'include', // 强制加入凭据头
          headers: new Headers({ 
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }),
          mode: 'cors', // 以CORS的形式跨域
          cache: 'force-cache',
          body: searchStr
        }
      }
      return new Promise((resolve, reject) => { 
        fetch(url, initObj).then((res) => { 
          return res.json()
        }).then(res => { 
          resolve(res)
        }).catch(err => { 
          reject(err)
        })
      })
    }
    
    /** * GET 请求 * @param {string} url 请求地址 * @param {object} options 请求参数 */
    function get (url, options) { 
      return doFetch(url, options, 'GET')
    }
    
    /** * POST 请求 * @param {string} url 请求地址 * @param {object} options 请求参数 */
    function post (url, options) { 
      return doFetch(url, options, 'POST')
    }
    
    function test () { 
      alert('ok')
    }
    
    export default { 
      test,
      setBaseUrl,
      get,
      post
    }

## 修改Mock数据类 ##

修改 `src/mock/index.js` 文件，使用 Mock 类初始化 mockFetch 工具类，从而修改系统原始的 Fetch 方法

import Mock from 'mockjs'
    import mockFetch from 'mockjs-fetch'
    mockFetch(Mock)

## 全局绑定 fetch 工具类 ##

修改 `src/main.js`，使用 mockjs-fetch 插件，对 mockjs 进行封装，并全局绑定对 fetch 封装的工具类

import myfetch from './utils/myFetch'
    process.env.MOCK && require('@/mock')
    Vue.prototype.$fetch = myfetch

其余均与之前一致

# 特别注意 #

fetch 的 method 用的是大写，而 ajax(axios) 的 method 用的是小写，因此官方插件不能同时生效

若要同时生效，可以修改 `node_modules/mockjs-fetch/index.js` ，将 options.method 和 item.rtype 全部转为小写

（略）
    window.fetch = function(url, options) { 
            options = options || { method: 'GET'};
            //添加上这一句，将method转为小写，可以使得axios与fetch并存
            options.method = options.method.toLowerCase();
            const method = options.method;
            if (Mock.XHR._settings.debug) { 
                console.log(`${ method} ${ url}`, 'options: ', options);
            }
            for (const key in Mock._mocked) { 
                const item = Mock._mocked[key];
                const urlMatch = (typeof item.rurl === 'string' && url.indexOf(item.rurl) >= 0) ||
                    (item.rurl instanceof RegExp && item.rurl.test(url));
                //同时，这里也将item.rtype转为小写
                const methodMatch = !item.rtype || (item.rtype.toLowerCase() === method);
                if (urlMatch && methodMatch) { 
    （略）

[20210215094631954.png]: /images/20221024/083cd711506340e389182f6603b77b0f.png