美文网首页
封装http请求且支持mock模式

封装http请求且支持mock模式

作者: xikoo0 | 来源:发表于2022-10-26 11:14 被阅读0次

    注:该方法使用场景为:axios以及mockjs,原生Ajax请求也可同理

    1.插件准备

    npm 模式

    npm install axios
    npm install mockjs
    

    yarn 模式

    yarn add axios
    yarn add mockjs
    

    2.请求方法封装

    requestMethod.js
    报错提示根据实际项目的使用修改

    import axios from 'axios';
    
    export default {
      // get请求
      get(url, params = {}, that, isMock = false) {
        url = isMock ? `/mock${url}` : url
        return new Promise((resolve, reject) => {
          axios.get(url, {
              params
            })
            .then(res => {
              resolve(res)
            })
            .catch(error => {
              that.$Notify({
                type: "danger",
                message: error.response.data.msg || "请求失败",
              });
              reject(error)
            })
        })
      },
      // post请求
      post(url, data, that, isMock = false) {
        url = isMock ? `/mock${url}` : url
        return new Promise((resolve, reject) => {
          axios.post(url, {
              data
            })
            .then(res => {
              resolve(res)
            })
            .catch(error => {
              that.$Notify({
                type: "danger",
                message: error.response.data.msg || "请求失败",
              });
              reject(error)
            })
        })
      },
      // put请求
      put(url, data, that, isMock = false) {
        url = isMock ? `/mock${url}` : url
        return new Promise((resolve, reject) => {
          axios.put(url, {
              data
            })
            .then(res => {
              resolve(res)
            })
            .catch(error => {
              that.$Notify({
                type: "danger",
                message: error.response.data.msg || "请求失败",
              });
              reject(error)
            })
        })
      },
      // 删除请求
      delete(url, data, that, isMock = false) {
        url = isMock ? `/mock${url}` : url
        return new Promise((resolve, reject) => {
          axios.delete(url, {
              data
            })
            .then(res => {
              resolve(res)
            })
            .catch(error => {
              that.$Notify({
                type: "danger",
                message: error.response.data.msg || "请求失败",
              });
              reject(error)
            })
        })
      },
    }
    

    3.将请求方法引用到main.js中

    import requestMethod from '@/request/requestMethod'
    app.config.globalProperties.$httpRequest = requestMethod;
    

    4.mock封装

    文件格式如下:

    flowchart LR
        mockData --> data --> mockDemo.js
        mockData --> index.js
        mockData --> mockBaseFunction.js
    

    mockBaseFunction.js
    封装了一些数据增删改查的方法

    import Mock from 'mockjs'
    
    export default {
      mock: Mock.mock, //这里定义mock变量,是为了方便其他成员使用mockjs,不需要再自己引用mockjs,直接引用mockBaseFunction.js即可
      // 将url转换成/mock+url格式
      getMockUrl(url) {
        return `/mock${url}`
      },
      // 将请求的传参转换成js对象
      getOptions(options) {
        return JSON.parse(options.body)
      },
      // 查询模拟数据
      queryMockData(option, mockData, selfFunction) {
        if (typeof (selfFunction) !== 'function') {
          return mockData
        }
        return selfFunction()
      },
      // 模拟新增数据
      addMockData(options, mockData, successData = {}, selfFunction) {
        const params = this.getOptions(options)
        if (typeof (selfFunction) !== 'function') {
          params.id = mockData.data.rows.length + 1
          mockData.data.rows.push(params)
          return successData || ''
        }
        return selfFunction()
      },
      // 模拟编辑数据
      updateMockData(options, mockData, successData = {}, selfFunction) {
        if (typeof (selfFunction) !== 'function') {
          const obj = this.getOptions(options)
          mockData.data.rows = mockData.data.rows.map(item => {
            return item.id === obj.id ? obj : item
          })
          return successData || ''
        }
        return selfFunction()
      },
      // 模拟删除数据
      deleteMockData(options, mockData, successData = {}, selfFunction) {
        if (typeof (selfFunction) !== 'function') {
          const id = parseInt(this.getOptions(options).id)
          mockData.data.rows = mockData.data.rows.filter(item => {
            return item.id !== id
          })
          return successData || ''
        }
        selfFunction()
      }
    }
    

    index.js
    读取data里面的mock接口

    (function () {
      const mockData = require.context('../mockData/data', false, /[A-Za-z0-9-_,\s]+\.js$/i)
      mockData.keys().reduce((modules, modulePath) => {
        // set './app.js' => 'app'
        const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
        const value = mockData(modulePath)
        modules[moduleName] = value.default
        return modules[moduleName][moduleName]()
      }, {})
    })()
    

    mockDemo.js
    mock demo数据,根据需要,封装不同模块mock数据

    import mockBaseFunction from '../mockBaseFunction'
    const successData = {
      data: null,
      code: 200,
      msg: "success",
      success: true,
    }
    const itemPriceInfo = mockBaseFunction.mock({
      code: 200,
      msg: "success",
      success: true,
      result: {
        'rows|5': [{
          category: '@name()', // '@name()随机生成英文名字'
          createdByName: '@cname()', // '@name()随机生成中文名字'
          'id|+1': 63, // "id|+number":number 生成的每个id比前面一个大number
          manufacturerName: '@ctitle()',
          'status|1-3': 3, // "status1-3"随机生成1-3中的某个整数
          supplierCompanyId: 61,
          supplierCompanyName: '@ctitle()', // '@ctitle()'随机生成中文标题
        }],
        pageResponse: {
          start: 0,
          limit: 5,
          results: 60
        }
      },
    })
    
    export default {
      mockDemo() {
        // 拦截的url:fun.getMockUrl('需要拦截的url'),请求方法,可为空:'',拦截后的操作方法
        // 拦截get请求,返回模拟数据
        mockBaseFunction.mock(RegExp(mockBaseFunction.getMockUrl('/api/web/itemPrice/findFinalPriceOfferPage') + '.*'), 'get', function (options) {
          return mockBaseFunction.queryMockData(options, itemPriceInfo)
        })
        // 拦截post请求,增加数据,拦截后返回增加模拟数据方法
        mockBaseFunction.mock(mockBaseFunction.getMockUrl('/api/userInfo/addUser'), 'post', function (options) {
          mockBaseFunction.addMockData(options, itemPriceInfo, successData)
        })
        // 拦截post请求,修改数据,拦截后返回修改模拟数据方法
        mockBaseFunction.mock(mockBaseFunction.getMockUrl('/api/userInfo/updateUser'), 'post', function (options) {
          mockBaseFunction.updateMockData(options, itemPriceInfo, successData)
        })
        // 拦截post请求,删除数据,拦截后返回删除模拟数据方法
        mockBaseFunction.mock(mockBaseFunction.getMockUrl('/api/userInfo/deleteUser'), 'post', function (options) {
          mockBaseFunction.deleteMockData(options, itemPriceInfo, successData)
        })
      }
    }
    

    5.mock接口引入main.js

    require('@/request/mockData/index')
    

    6.使用

    const queryRegistration = async () => {
          const res = await proxy.$httpRequest.get(
            '/api/web/itemPrice/findFinalPriceOfferPage',
            {},
            proxy,
            true
          );
          console.log('res',res)
        };
    

    具体mock使用,参见 在项目中使用mockjs

    相关文章

      网友评论

          本文标题:封装http请求且支持mock模式

          本文链接:https://www.haomeiwen.com/subject/myyazrtx.html