vue3+ts封装axios实例以及解决跨域问题
作者:韭菜盖饭
在前端开发中,使用axios进行数据请求是常见的做法,封装axios可以统一请求头处理、方便接口管理、配置多拦截器等,提高代码的可维护性和重用性,本文详细记录了axios的封装过程,包括安装、配置跨域处理、接口管理文件的创建等
一、前言
前端请求后端数据时,会用到axios,但是如果不将axios封装好,会导致代码冗余
二次封装的好处如下:
- 求头能统一处理
- 便于接口的统一管理
- 解决回调地狱
- 配置拦截器,给不同的实例配置不同的拦截器,支持以对象形式接受多个拦截器配置
因此,在这里记录一下axios的封装过程。
二、封装axios
安装axios
npm install axios
在目录/src/utils
下创建一个http
的文件夹
request.ts
文件内容如下:
import axios from 'axios'; // 创建 axios 实例 const instance = axios.create({ baseURL: 'http://127.0.0.1:4008/api/', // API 基础路径 timeout: 100000, // 请求超时时间 headers:{ 'Content-Type': 'application/json;charset=UTF-8', } }); // 请求拦截器 instance.interceptors.request.use( config => { // 在发送请求之前做些什么,例如添加token // config.headers['Authorization'] = 'Bearer your-token'; return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 return Promise.reject(error); } ); export default instance;
api.ts
文件如下:
import http from './request' export const generateVoice = (params:any) => { return http.request({ method: 'POST', url: '/generate_voice', headers: { 'Content-Type': 'application/json' }, data:JSON.stringify(params) }) }
api.ts
文件的目的是为了方便管理接口,你可以把所有接口卸载这里,这样就会在后面调用时更加简洁
三、 解决跨域
在vite.config.ts
文件中添加如下配置
server: { port: 4008, host: '0.0.0.0', proxy: { "/api": { target: "http://64.176.215.21:8000/", changeOrigin: false, ws: true, rewrite:(path) => path.replace(/^\/api/, "") } }, },
注意 配置以上文件,你的接口就需要每次带上/api
前缀
在request.ts文件中,我们已经做好了每次带上/api
前缀的代码
baseURL: 'http://127.0.0.1:4008/api/', // API 基础路径 //or baseURL: '/api/', // API 基础路径
四、调用接口
没有使用api.ts
的接口
axios.post('/generate_voice',param) .then(response => { console.log(response); }) .catch(error => { console.error(error); });
使用api.ts
封装好的接口
import {generateVoice} from '@/utils/http/api'; generateVoice(param) .then(response => { console.log("Voice generated successfully:", response.data); }) .catch(error => { console.error("Error generating voice:", error); });
五、运行结果
可以看到控制台返回的乱码数据,表示我们请求后台成功了
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。