vue3+ts项目 | axios 的测试 | 测试接口

原创 已于 2024-04-02 18:19:34 修改 · 641 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

于 2024-03-29 21:32:23 首次发布

在 App.vue 中，测试接口 

// App.vue  测试接口
  import request from '@/utils/request';
  import { onMounted } from 'vue';
  onMounted(() => {
    request.get('/hosp/hospital/1/10').then((res) => {
      console.log("APP组件展示获取的数据",res);
    })
  })

在 request.ts 中，进行错误处理提示，参考 HTTP状态码

最低0.47元/天 解锁文章
封装axios后的测试接口
qq_61268825的博客
01-12 721
我这边测试通过全靠翻阅百度带来的灵感，必须奉上链接： axios封装 接口链接 在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。 // 在http.js中引入axios import axios from 'axios'; // 引入axios import QS from 'qs'; // 引入qs...
vue3.0+ts 封装axios
zy991315的博客
07-03 1021
vue3.0+ts 封装axios
axios测试接口小练习
最新发布
cherryDemo的博客
09-22 655
本文介绍了使用axios测试接口的完整流程：1）创建代码文件和模拟数据的JSON文件；2）通过JSON Server搭建本地接口服务；3）使用Postman测试接口；4）在HTML中引入axios进行前端调用。文章特别指出了在VSCode中同时使用LiveServer和JSON Server时可能出现的页面死循环问题（由文件变更触发自动刷新导致），建议通过直接打开HTML文件的方式运行页面来解决此冲突。整个教程涵盖了从后端模拟到前端调用的全链路接口测试方法。
Vue项目中常见问题(6)接口测试
qq_46368050的博客
05-13 836
目录 gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 请求地址 1.下载postman 2.打开postman 3.测试接口地址 往期推荐: Vue项目中常见问题(1)如何控制组件在不同页面中的显示与隐藏_学无止境QAQ的博客-优快云博客 Vue项目中常见问题(2)路由传参的方法_学无止境QAQ的博客-优快云博客 Vue项目中常见问题(3)重写push|replace,解决
vue3实现类postman 接口测试功能
weixin_52725484的博客
03-29 1773
主要实现form-data、x-www-form-urlencoded、raw以及单独上传文件功能、可单独配置请求头。获取测试结果并下载为json格式文件。raw代码编辑器：选择monaco。
【接口测试】axios测试接口
weixin_30590285的博客
09-28 2673
使用axios测试接口（这个是get请求的数据） axios({ method:"GET", url:"/api/category/product/model-detail-by-model-id-new?entityId=4&modelId=11222&proModelId=13&source=3" }).then((dat...
Vue3+Vite+TS+Pinia+ElementPlus+Router+Axios创建项目
qq_24484317的博客
02-14 3289
Vue3+Vite+Pinia+ElementPlus+Router+Axios创建项目
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
vue3 + ts + cli 项目封装axios
Chow_yi的博客
03-24 253
二次封装axios
从0到1搭建一个vue3+ts+vite项目，集成axios、router、sass、ant design vue组件库等。
Yjx的博客
08-28 1352
从0到1搭建vue3+ts+vite项目，集成各种插件库使你开发得心应手~~~
Vue项目中的接口调用
热门推荐
一起学习前端知识，一起成为前端开发工程师！
04-24 2万+
在企业开发过程中，往往有着明确的前后端的分工，前端负责接收、使用接口，后端负责编写、处理接口。 对于前端如何使用接口，今天在Vue中进行讲解。 一个项目往往由这几个部分组成。 其中在src文件夹中，，有这么些内容。 我们常常把接口文件，新建一个文件夹在src下，命名为api，api内的文件便是接口文件。 通常把后端的接口写在api文件夹下，自己命名为xxx.js // 登录 export function login(data) { return request({ url: '/api/c
axios本机测试mock的接口
aliven1的博客
06-29 322
//本机测试mock的接口，baseURL:“http://10.88.71.11:8000”,这行需要注释掉 //不注释掉会报404 import axios from ‘axios’; import service from ‘./serviceApi.js’; let instance = axios.create({ // baseURL:“http://10.88.71.11:8000”, timeout: 10000 }); ...
利用axios读取后台接口
前端菜鸡的博客
09-04 1211
我们都知道在vue2.0以后就对vue-resource停止更新了，推荐使用的则是axios axios使用的方式也很简单，通过三个步骤就可以实现 一、安装 axios npm install axios 二、引入 axios 在main.js文件中 import Vue from 'vue' import App from './App' import router from './route...
axios-身体质量测试
m0_69712602的博客
09-09 301
一个简单的身体质量测试实现
Axios 实例模块单元测试
Geordies的博客
01-05 400
# Axios 实例模块单元测试 ts-axios 提供了 axios.create 静态方法，返回一个 instance 实例，我们需要对这个模块做测试。 # 测试代码编写 test/instance.spec.ts： import axios, { AxiosRequestConfig, AxiosResponse } from '../src/index' import { getAjaxR...
axios简单练习
qq_39176307的博客
05-06 1026
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、get请求前端代码（vue+axios）后端代码（springboot）效果二、post请求普通参数前端代码（vue+axios）后端代码（springboot）效果formdata参数前端代码（vue+axios）后端代码（springboot）效果 前言 今天做一个post请求前后端代码练习。实现思路：前端使用axios发送post请求，后端使用过springboot接受请求。 一、get请求 前端代码（vue+ax.
ajax/axios访问后端测试方法
长安紫薯的专栏
07-24 980
ajax工具
axios请求模拟调试器
guoscy的博客
01-04 4529
axios-mock-adapter介绍axios-mock-adapter即axios的模拟调试器，通过axios模拟调用后台，后台数据可以使用mock.js来造假数据。1.安装1、使用npm： $ npm install axios-mock-adapter --save-dev 2、使用cdn https://unpkg.com/axios-mock-adapter/dist/axios
ajax，fetch，axios测试用例
人间草木
01-22 277
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equ...
我在vue3+ts项目 想写假接口来测试
07-01
在 Vue3 + TypeScript 项目中，你可以使用 **Mock Service Worker (MSW)** 或 **Mock.js** 来创建假接口进行测试。以下是两种方法的详细实现方案： --- ## **方法 1：使用 Mock Service Worker (MSW)（推荐）** MSW 是一个强大的 API 模拟工具，可以在浏览器和服务端拦截请求，返回模拟数据。 ### **1. 安装 MSW** ```bash npm install msw --save-dev ``` ### **2. 创建 Mock 服务** 在 `src/mocks` 目录下创建 `browser.ts` 和 `handlers.ts`： #### **`src/mocks/handlers.ts`**（定义模拟接口） ```typescript import { http, HttpResponse } from &#39;msw&#39;; // 定义模拟数据 const mockUsers = [ { id: 1, name: &#39;张三&#39;, email: &#39;zhangsan@example.com&#39; }, { id: 2, name: &#39;李四&#39;, email: &#39;lisi@example.com&#39; }, ]; // 定义请求拦截逻辑 export const handlers = [ // GET /api/users http.get(&#39;/api/users&#39;, () => { return HttpResponse.json(mockUsers); }), // POST /api/users http.post(&#39;/api/users&#39;, ({ request }) => { const newUser = request.json(); mockUsers.push({ id: mockUsers.length + 1, ...newUser }); return HttpResponse.json({ success: true }); }), ]; ``` #### **`src/mocks/browser.ts`**（启动 Mock 服务） ```typescript import { setupWorker } from &#39;msw/browser&#39;; import { handlers } from &#39;./handlers&#39;; // 启动 Mock Service Worker export const worker = setupWorker(...handlers); ``` ### **3. 在 `main.ts` 中初始化 MSW** ```typescript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; // 仅在开发环境启用 Mock if (import.meta.env.DEV) { const { worker } = await import(&#39;./mocks/browser&#39;); worker.start({ onUnhandledRequest: &#39;bypass&#39; }); } createApp(App).mount(&#39;#app&#39;); ``` ### **4. 在组件中使用模拟接口** ```typescript <script setup lang="ts"> import { ref, onMounted } from &#39;vue&#39;; import http from &#39;@/utils/http&#39;; // 你的 Axios 封装 interface User { id: number; name: string; email: string; } const users = ref<User[]>([]); onMounted(async () => { try { users.value = await http.get<User[]>(&#39;/api/users&#39;); // 会被 MSW 拦截 } catch (error) { console.error(&#39;获取用户失败:&#39;, error); } }); </script> ``` --- ## **方法 2：使用 Mock.js** Mock.js 是一个轻量级的模拟数据生成库，适合简单的假数据测试。 ### **1. 安装 Mock.js** ```bash npm install mockjs --save-dev ``` ### **2. 创建 Mock 数据** 在 `src/mocks` 目录下创建 `mock.ts`： #### **`src/mocks/mock.ts`** ```typescript import Mock from &#39;mockjs&#39;; // 模拟用户数据 Mock.mock(&#39;/api/users&#39;, &#39;get&#39;, { &#39;users|5-10&#39;: [ { &#39;id|+1&#39;: 1, name: &#39;@cname&#39;, // 随机中文名 email: &#39;@email&#39;, // 随机邮箱 }, ], }); // 模拟 POST 请求 Mock.mock(&#39;/api/users&#39;, &#39;post&#39;, (options: any) => { const body = JSON.parse(options.body); return { success: true, message: `用户 ${body.name} 添加成功！`, }; }); ``` ### **3. 在 `main.ts` 中引入 Mock** ```typescript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; // 仅在开发环境启用 Mock if (import.meta.env.DEV) { import(&#39;./mocks/mock&#39;); } createApp(App).mount(&#39;#app&#39;); ``` ### **4. 在组件中使用** 和 MSW 一样，直接调用你的 Axios 封装即可： ```typescript const fetchUsers = async () => { users.value = await http.get(&#39;/api/users&#39;); // 会被 Mock.js 拦截 }; ``` --- ## **对比 MSW 和 Mock.js** | 特性 | MSW | Mock.js | |------|-----|---------| | **拦截方式** | 服务端 + 浏览器拦截 | 仅前端拦截 | | **数据模拟** | 可自定义逻辑 | 基于模板生成随机数据 | | **适用场景** | 适合复杂 API 模拟 | 适合简单假数据 | | **TypeScript 支持** | ✅ 良好 | ⚠️ 一般 | --- ## **总结** - **推荐 MSW**：适合真实 API 模拟，支持拦截 `fetch` 和 `XMLHttpRequest`，更接近真实环境。 - **Mock.js**：适合快速生成随机数据，但灵活性不如 MSW。 你可以根据项目需求选择合适的方式！🚀
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值