我们封装 $request 作为主要对象,并扩展.get方法,sifou,jianshu 为其属性作为两个不同域接口的方法,从而实现了我们在一个前端工程中请求多个不同域接口。接下来让我们看看实现的相关代码吧(当前只展示部分核心代码)~ 二次封装 axios 的request请求插件 这里我们拿axios为例,先对它进行一个封装: 代码语言:txt 复制...
用vite创建初始vue项目后,会生成一个默认的vite.config.ts文件,内容如下: import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()] }) 然后我们开始配置vite.config.ts, 并且会在代码中以注释的形式进行说明 // 使用 defineConfig 帮手...
一、封装接口 例如封装一个user相关的接口文件，创建api目录，创建user.ts文件：import shaxios from "@/utils/shaxios"export const getUser = (userId:string)=>{ return shaxios({ method:"get", url:"/hellosh", params: {parentId: userId}, })}export const getUserList = (params...
配置api封装 在src目录下,创建api文件夹,然后生成user.ts文件,存放登录注册忘记密码等接口 import request from '../utils/request' interface userState { username: string password: string } export default { /** * 登录接口 * @param { string } username 用户名称 * @param { string } password 用户密...
vue3 +ts 如何安装封装axios Table of Contents 封装接口 案例 使用 以vite创建的项目,vue3使用axios。 使用ts二次封装axios访问接口,并调用接口。 vue3安装封装axios,其实和vue2的大差不差。只是在ts和js上,有些区别。 为什么封装axios 求头能统一处理...
request.ts 主要用于封装基于axios配置的get/post/put/delete等使用方法。 api.ts 在后面的 main.ts 中引入该模块,包括所有接口数据信息写入该文件中。 index.ts 封装如下。考虑到单一职责,index这块只封装axios // index.tsimportaxios, {AxiosRequestConfig,Method}from"axios";importrouterfrom"@/router";importst...
request.ts 用于封装请求方式 api.ts 存放具体接口 代码如下 http.ts constbaseURL='';importaxiosfrom'axios'const$http=axios.create({//设置默认请求地址baseURL,//设置请求超时时间timeout:5000,//设置请求头headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}})// 先导入vuex,...
项目正式上线时,除了 master 主要接口,其他分支的不同域接口,服务端需要开启跨域白名单。 总结 本文为一个前端项目请求多个不同域的接口,提供了封装的思路,基础框架为 Vue3+TS。 不同的项目业务场景复杂程度不一致,可能还需要更多的封装,针对业务的抽象架构才是不耍流氓的架构。 以上只是阐述了一些核心代码,具体还...
一般来说我们会对请求框架进行封装,类似request.get('getUser'),我们还会设置一个 “baseURL” 为默认域名,如https://a.com。这样子 “request” 默认发起的请求都是https://a.com下的相关接口。 那请求域名https://b.com相关接口我们该怎样进行封装呢?
vue3 + ts + vite 封装 request npm i axios 目录 request.ts (直接复制可用) import axiosfrom"axios"; import { showMessage }from"./status";//引入状态码文件import { ElMessage }from"element-plus";//引入el 提示框,这个项目里用什么组件库这里引什么//设置接口超时时间axios.defaults.timeout =60000...