vue3和ts封装axios及使用mock.js的方法是什么

云技术五哥 • 05/11 10:00 • 开发 • 阅读 48

这篇文章主要讲解了“vue3和ts封装axios及使用mock.js的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3和ts封装axios及使用mock.js的方法是什么”吧！我们要注意区分 Axios 和 Ajax ：Ajax 是一种技术统称，技术内容包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest，用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新，使用是基于XMLHttpRequest 进行使用；Axios 是一个基于 promise 的 HTTP 库，是一个是第三方库主要技术栈：vue3，ts，axios，mock.js，elementPlus使用异步网络请求肯定离不开loading、message 等提示，今天我们配合 elementPlus 一起使用；src 目录下 utils 目录下，新建 request.ts，因为使用的是TS，需要提前定义数据格式：定义请求数据返回的格式，需要提前确认好定义 axios 基础配置信息请求拦截器：所有请求最先到达的地方，我们可以在此自定义请求头信息（比如：token、多语言等等）响应拦截器：返回数据最先到达的地方，我们可以在此处理异常信息（比如：code为401重定向至登录、code为500提示错误信息）src 目录下新增 api/index.ts定义请求的参数类型定义响应想具体参数类型这里我们使用到ts 中的 namespace ，实际开发中我们很多 api 可能会出现相同名字不同含义，所以我们使用 namespace 进行定义Vue 文件中调用在 ts 中使用时，我们需要现在shims-vue.d.ts 文件中去抛出模块，不然会出现引入报错的问题index.ts（属于mockjs全局配置文件），mockjs/javaScript/index.ts（具体的数据文件），这两个需要关注，别的不用关注1. 新建 mockjs/javaScript/index.ts（具体的数据文件）因为我这里的数据主要是侧边栏的数据，都是固定好的，所以并没有用到 mockjs 的规则生成数据Sidebar.ts2. 新建 mockjs/index.ts3. main.ts 引入实际上就是刚刚调用axios 的那一段代码感谢各位的阅读，以上就是“vue3和ts封装axios及使用mock免费云主机域名.js的方法是什么”的内容了，经过本文的学习后，相信大家对vue3和ts封装axios及使用mock.js的方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！