模拟接口数据之使用Fetch方法实现

文章目录


前言

在前后端分离的项目,模拟数据显示格外重要。要么接口出现异常,要么后台接口还未能调用成功...

网上有很多关于处理mock数据的依赖插件,那么在不需要其他依赖的情况下,配置本地mock数据,需要怎样获取呢?

咱这里直接使用Es6提供的Fetch内置方法

  • 该fetch()方法启动从服务器获取资源的过程。
  • 该fetch()方法返回一个解析为 Response 对象的 Promise。
  • 😀不再需要 XMLHttpRequest。

本文基于vite+vue3+ts项目构建详细步骤(配置多语言版本)项目格式扩展,如需了解请移步。


一、package.json配置mock执行脚本

json 复制代码
"mock": "vite serve --mode mock",

二、封装接口,区分走ajax还是fetch

这里只封装getpost方法。

  • 使用vite中的import.meta.env.MODE判断
ts 复制代码
/**
 * 发起GET请求, 泛型 T 定义返回数据 data 项类型, U 定义请求数据类型
 * @param {string} url 请求链接
 * @param {object} params 请求参数
 * @param {object} config 配置
 */
export const get = <U = unknown, T = unknown>(
  url: string,
  params?: U,
  config?: AxiosRequestConfig,
) => {
  console.log(config?.baseURL)
  if (import.meta.env.MODE === 'mock') {
    return fetch(`/mock${url}.json`)
  } else {
    return axios.get<T, T>(
      url, { params: { ...params, t: Date.now() }, ...config },
    )
  }
}

/**
 * 发起POST请求, 泛型 T 定义返回数据 data 项类型, U 定义请求数据类型
 * @param {string} url 请求链接
 * @param {object} params 请求参数
 * @param {object} config 配置
 */
export const post = <U = unknown, T = unknown>(
  url: string,
  params?: U,
  config: AxiosRequestConfig = {},
) => {
  console.log('config_config', config)
  if (import.meta.env.MODE === 'mock') {
    return fetch(`/mock${url}.json`)
  }
  if (Array.isArray(params)) {
    return axios.post<T, T>(url, [...params], config)
  }
  return axios.post<T, T>(url, { ...params }, config)
}

三、创建mock目录,及相关接口文件

现在项目根目录新建mock文件夹,然后根据实际接口新建对应文件

例如:接口路径为 /usr/getUser

在mock文件夹下新建usr目录,然后再usr内新建getuser.json文件

json 复制代码
{
    "code": 200,
    "data": {
        "userName": "用户名",
        "emali": "shimianshijian@qa.com"
    },
    "message": "OK"
}

四、定义接口

  • /src/usr/index.ts定义/usrgetUser接口
ts 复制代码
import { get, post } from ".."
export const getUser = () => {
    return get<null, null>('/usr/getUser')
}
export const getUserP = () => {
    return post<null, null>('/usr/getUser')
}
  • 在main,js调用
ts 复制代码
import { getUser, getUserP } from './server/usr'
getUser()
getUserP()

五、使用mock数据

使用模拟数据

bash 复制代码
npm run mock

如图可看到请求类型为fetch,并返回了对应数据

优化fetch返回数据

  • 不过打印出来的数据并不是想要的效果,别急,咱可再次封装fetch方法,使其返回需要的对象数据
  • 封装fetch

封装fetch并修改getpost中的fetch,代码如下

ts 复制代码
export const getFetchData = async(url: string) => {
  const fetchFile = await fetch(url)
  const fetchENV = await fetchFile.json()
  return fetchENV
};
...

/**
 * 发起GET请求, 泛型 T 定义返回数据 data 项类型, U 定义请求数据类型
 * @param {string} url 请求链接
 * @param {object} params 请求参数
 * @param {object} config 配置
 */
export const get = <U = unknown, T = unknown>(
  url: string,
  params?: U,
  config?: AxiosRequestConfig,
) => {
  console.log(config?.baseURL)
  if (import.meta.env.MODE === 'mock') {
    return getFetchData(`/mock${url}.json`)
  } else {
    return axios.get<T, T>(
      url, { params: { ...params, t: Date.now() }, ...config },
    )
  }
}

/**
 * 发起POST请求, 泛型 T 定义返回数据 data 项类型, U 定义请求数据类型
 * @param {string} url 请求链接
 * @param {object} params 请求参数
 * @param {object} config 配置
 */
export const post = <U = unknown, T = unknown>(
  url: string,
  params?: U,
  config: AxiosRequestConfig = {},
) => {
  console.log('config_config', config)
  if (import.meta.env.MODE === 'mock') {
    return getFetchData(`/mock${url}.json`)
  }
  if (Array.isArray(params)) {
    return axios.post<T, T>(url, [...params], config)
  }
  return axios.post<T, T>(url, { ...params }, config)
}

修改后数据打印如下,具体可根据实际拦截器是否返回codemessage这一级别数据(即需要修改为数据同级)

六、不使用模拟数据

bash 复制代码
npm run dev

如图可看到请求类型为xhr,说明区分模拟数据生效了

七、对比其他需要使用依赖相关配置

如上配置,同其他mock方式有同样的效果,且无需再安装各种依赖,简单又实用。

如有启发,可点赞收藏哟~

相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918415 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
JavaScript二叉树相关概念
前端
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)7 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术7 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体