麻涌镇网站建设,微信支付开发文档,成都那家网站制作公司好,应用网站目录 Axios封装、调用mock接口、Vite跨域及环境变量配置封装Axios对象调用mock接口数据第一步、安装axios#xff0c;处理一部请求第二步、创建request.ts文件第三步、本地模拟mock数据接口第四步、测试axiosmock接口是否可以调用第五步、自行扩展 axios 返回的数据类型 axios… 目录 Axios封装、调用mock接口、Vite跨域及环境变量配置封装Axios对象调用mock接口数据第一步、安装axios处理一部请求第二步、创建request.ts文件第三步、本地模拟mock数据接口第四步、测试axiosmock接口是否可以调用第五步、自行扩展 axios 返回的数据类型 axios.d.ts 跨域解决什么是跨域跨域示例跨域解决跨域实操 Vite配置环境变量及模式Vite 配置环境变量Vite配置环境模式 重构代理配置完结~ Axios封装、调用mock接口、Vite跨域及环境变量配置
封装Axios对象调用mock接口数据
因为项目中有很多接口要通过Axios发送异步请求所以需要封装一个axios对象自己封装的Axios后面可以时候axios中提供的拦截器参考官方文档
第一步、安装axios处理一部请求
npm install axios第二步、创建request.ts文件
在 src 目录下创建utils目录然后 utils 目录下创建 request.ts 文件
import axios from axios;
import type { AxiosInstance } from axios;
import { ElMessage } from element-plus;
// 手动创建一个 axios 对象, 参考: https://github.com/axios/axios#creating-an-instance
const request: AxiosInstance axios.create({//baseURL: https://mock.xxx.com/mock/64fa8039e70b8004a69ea036/hsk-admin,// 根据不同环境设置 baseURL, 最终发送请求时的URL为: baseURL 发送请求时写URL ,// 比如: baseURL: /dev-api 当请求 get(/test), 最终发送请求是: /dev-api/test// baseURL: /dev-api,// 获取项目根目录下 .env.xxxx 文件中的环境变量值baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 20000, // 请求超时的毫秒数请求时间超过指定值则请求会被中断
});
// 请求拦截器
request.interceptors.request.use(config {// 在此处可向请求头加上认证tokenreturn config;
}, error {// 出现异常, catch可捕获到return Promise.reject(error);
})
// 响应拦截器
request.interceptors.response.use(response {// console.log(响应拦截器, response);const res response.data;// 20000 正常响应返回响应结果给调用方if (res.code 20000) {return res;}// 非正常响应弹出错误信息ElMessage.error(res.message);return Promise.reject(res);
}, error {// 处理响应错误const { message, response } error;if (message.indexOf(timeout) ! -1) {ElMessage.error(网络超时);} else if (message Network Error) {ElMessage.error(网络连接错误);} else {if (response.data) ElMessage.error(response.statusText);else ElMessage.error(接口路径找不到);}return Promise.reject(error);
});
export default request; // 导出 axios 对象第三步、本地模拟mock数据接口
前后端分离开发过程中后端数据接口还没有写出来前端可以使用mock模拟假数据进行先一步页面的开发使用mockjs模拟后端接口可随机生成所需要的数据模拟对数据的增删查改mock支持丰富的数据类型支持生成随机的文本数字布尔值日期邮箱链接图片颜色等拦截Ajax请求不需要修改既有代码可以拦截返回模拟的响应数据。
项目中使用mockjs的时候首先确保安装了axios和mock上面第一步的时候已经安装了axios数据现在开始进行安装mock
npm install -D mockjs在项目的src文件夹下新建一个文件夹用来存放mock模拟的数据,一般我们放在将mock模拟的数据 /src/mock/index.js这个文件中这里以此为例。
//这里是我使用本地的服务器商品接口地址模拟的数据
import { mock } from mockjs
let data mock({code: 20000,message: 查询成功,data: [{ name: 小梦, age: 18 },{ name: 涛姐, age: 32 },{ name: 林志玲, age: 48 }]
})
mock(/test/, get, () {return data
})模拟完数据后在入口主文件 main.js 中引入这个模拟数据的文件
import ./mock/index.js第四步、测试axiosmock接口是否可以调用
在 src/ 下创建 /api/test.ts 目录和文件, 调用接口代码如下:
import request from /utils/request;
export function test1() {// 测试1: 调用 get 方式发送get请求request.get(/test).then(response {console.log(get1, response);}).catch(error {console.log(error, error);});
}export function test2() {// 测试2, 使用对象形式传入请求配置如 请求url, methodparamrequest({url: /test,method: GET}).then(response {console.log(get2, response);}).catch(error {console.log(error);});
}app.vue页面引入接口并调用
templatedivel-iconele-Search //el-iconSvgIcon nameele-Search/SvgIconel-button typeprimaryPrimary/el-button/div
/template
script langts setup
// 导入 test.ts
import { test1, test2 } from ../src/api/test.ts;
// 调用方法发送请求
test1();
test2();
/script
style langscss
// 编写 scss 代码
/style效果 测试三、通过 api 方法返回请求的 Promise 对象然后在调用方通过then 获取响应数据api\test.ts 新增如下代码
import request from /utils/request;
// 返回 Promise
export function getList() {const req request({url: /test,method: GET});// console.log(req) // Promisereturn req;
}在 App.vue 中导入 test.ts
script setup langts
// 导入 test.ts调用方法发送请求
import { getList } from /api/test;
import { onMounted } from vue;
onMounted(() {loadData();loadData2();
});
function loadData() {getList().then((response: any) {console.log(loadData, response);}).catch((error: Error) {console.log(error);});
}
// 使用 asyncawait
async function loadData2() {const response await getList();console.log(loadData2, response);
}
/script后面数据访问都采用测试三这种方式。
第五步、自行扩展 axios 返回的数据类型 axios.d.ts 使用axios发送请求接口后axios生命的响应对象AxiosResponse中的属性并不是我们想要的我们需要自行扩展为我们需要相应的数据类型。 /* eslint-disable */
import * as axios from axios;
// 自行扩展 axios 返回的数据类型
declare module axios {export interface AxiosResponseT any {code: number;message: string;data: T;}
}declare 定义的接口类型在 SFC 和 ts 文件中不需要导入相当于全局接口直接引用接口类型。但是要告知 ts 文件在哪里 自动加载 *.d.ts文件修改 tsconfig.app.json 旧版本在 tsconfig.json 中文件的 includes 选项值追加 src/**/*.d.ts
{extends: vue/tsconfig/tsconfig.dom.json,include: [env.d.ts, src/**/*, src/**/*.vue, src/**/*.d.ts],exclude: [src/**/__tests__/*],compilerOptions: {composite: true,baseUrl: .,paths: {/*: [./src/*]}}
}注意添加后重启编辑器VsCode不然可能无法识别到*.d.ts文件
跨域解决
什么是跨域
前后端分离时前端和后端API服务器可能不在同一台主机上面就存在跨域问题浏览器限制了跨域访问违反了同源策略【协议域名端口】都要相同其中一个不同都会产生跨域。
跨域示例 前端部署在http://127.0.0.1:8888/即本地ip端口8888上面后端API部署在http://127.0.0.1:9999/即本地ip端口999上面 他们的IP一样但是端口不一样就会存在跨域问题。
跨域解决
【跨域解决参考文档入口】 通过代理请求的方式解决将 API 请求通过代理服务器请求到 API 服务器。开发环境中在 vite.config.ts 文件中使用 server.proxy 选项进行代理配置。生产环境可采用 nginx代理 解决跨域问题。 跨域实操
在 vite.config.ts 文件中使用 server.proxy 选项进行代理配置。
import { fileURLToPath, URL } from node:url
import { defineConfig } from vite
import vue from vitejs/plugin-vue
// https://vitejs.dev/config/
export default defineConfig({// 开发服务器选项参考https://cn.vitejs.dev/config/server-options.html#server-hostserver: {open: true, //启动服务时自动打开浏览器访问port: 8888, //端口号 如果端口号被占用会自动提升1proxy: { // 解决跨域问题/dev-api: { // 匹配 /dev-api 开头的请求// 目标服务器, 代理访问到https://mock.mengxuegu.com/mock/6621e5cbfaa39b4567596484/adminPowertarget: https://mock.mengxuegu.com/mock/6621e5cbfaa39b4567596484/adminPower,// 开启代理在本地会创建一个虚拟服务端然后发送请求的数据并同时接收请求的数据// 这样服务端和服务端进行数据的交互就不会有跨域问题changeOrigin: true,// 将 /dev-api 替换为 ,也就是 /dev-api 会移除// 如 /dev-api/test 代理到https://mock.mengxuegu.com/mock/6621e5cbfaa39b4567596484/adminPowerrewrite: (path) path.replace(/^\/dev-api/, ),},}},plugins: [vue(),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}}
})将 src\utils\request.ts 中的 baseURL 修改const request: AxiosInstance axios.create({baseURL: /dev-api,timeout: 20000, // 请求超时的毫秒数请求时间超过指定值则请求会被中断
}); 测试访问http://127.0.0.1:8888/查看控制台响应了数据说明代理成功
Vite配置环境变量及模式
Vite 配置环境变量
环境分为testprodtest环境他们请求的后台接口获取数据不同环境的接口的URL不同所以要为不同环境配置不同的接口URL通过路径前缀进行匹配。 在根目录下创建.env.development和.env.production文件为了防止意外地讲一些环境变量泄漏到客户端只有以VITE_为前缀的环境变量才会通过import.meta.env以字符串形式暴露给经过Vite处理的代码使用。 如 VITE_DEV_API/dev-api可以通过 import.meta.env.VITE_DEV_API访问返回/dev-api。WY_DEV_API/dev-api不能通过 import.meta.env.WY_DEV_API访问返回undefined。 .env.development 文件配置注意开发和生产环境配置不要搞反了VITE_APP_SERVICE_URL 值更改为你自已配置的 项目后端的 接口服务地址。 # 使用 VITE_ 开头的变量会被 vite 暴露出来
# 定义请求的基础URL, 方便跨域请求时使用
VITE_APP_BASE_API/dev-api
# 接口服务地址
VITE_APP_SERVICE_URL https://www.****.com/.env.production 文件配置 # 使用 VITE_ 开头的变量会被 vite 暴露出来
# 定义请求的基础URL, 方便跨域请求时使用
VITE_APP_BASE_API/pro-api
# 接口服务地址
VITE_APP_SERVICE_URL https://www.****.com/测试是否配置成功在 request.ts 中添加以下代码看下浏览器控制台是否会输出在项目任意模块文件中都可以使用 通过 import.meta.env.VITE_APP_BASE_API 获取值: import axios from axios;
import type { AxiosInstance } from axios;
import { ElMessage } from element-plus;
console.log(import.meta.env.VITE_APP_BASE_API)
const request: AxiosInstance axios.create({baseURL: /dev-api,timeout: 20000, // 请求超时的毫秒数请求时间超过指定值则请求会被中断
});Vite配置环境模式
默认情况下开发服务器 ( dev 命令) 运行在 development (开发) 模式而 build 命令则运行在 production(生产) 模式。 查看package.json 当执行 vite build 时它会自动加载 .env.production 中可能存在的环境变量
VITE_APP_BASE_API/pro-api在 utils/request.ts 中可以使用import.meta.env.VITE_APP_BASE_API 获取引用。在某些情况下若想在 vite build 时运行不同的模式来渲染不同的标题你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。
例如如果你想在 production生产模式下构建应用 项目根目录下新建一个 .env.production文件 在 package.json 中添加一个prod选项运行 vite --mode production命令 启动prod环境查看console.log(import.meta.env.VITE_APP_BASE_API) 打印结果
重构代理配置
重构vite.config中的server.proxy代理配置在vite.config.ts中无法通过import.meta.env.xxx获取到VITE_环境变量解决此问题需要用到vite中提供的loadEnv方法来读取环境变量。
import { defineConfig, loadEnv } from vite
// mode获取 --mode 指定的模式process.cwd()项目根目录,下面 env 相当于 import.meta.env
const env loadEnv(mode, process.cwd());重构vite.config中的server.proxy代理配置import { fileURLToPath, URL } from node:url
// 1. 导入 loadEnv
import { defineConfig, loadEnv } from vite
import vue from vitejs/plugin-vue
// 2. 向 defineConfig 传递对象改为传递方法并返回配置对象
export default defineConfig(({ mode }) {// mode获取 --mode 指定的模式process.cwd()项目根目录下面 env 相当于 import.meta.envconst env loadEnv(mode, process.cwd());return {// 开发服务器选项server: {open: true, //启动服务时自动打开浏览器访问port: 8888, //端口号 如果端口号被占用会自动提升1proxy: {// /dev-api: { // 匹配 /dev-api 开头的请求[env.VITE_APP_BASE_API]: { // 引用变量作为key时要加中括号[]// 目标服务器target: env.VITE_APP_SERVICE_URL,// 开启代理changeOrigin: true,rewrite: path path.replace(new RegExp(^${env.VITE_APP_BASE_API}/), )},}},plugins: [vue(),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}}}
});修改 utils/request.ts 文件配置 baseURL: import.meta.env.VITE_APP_BASE_APIimport axios from axios;
import type { AxiosInstance } from axios;
import { ElMessage } from element-plus;
console.log(import.meta.env.VITE_APP_BASE_API)
const request: AxiosInstance axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 20000, // 请求超时的毫秒数请求时间超过指定值则请求会被中断
});重启看一下效果接口是否调用到
完结~
