本文主要是介绍vue3+ts封装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 基础路径//orbaseURL: '/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);});
五、运行结果
可以看到控制台返回的乱码数据,表示我们请求后台成功了
这篇关于vue3+ts封装axios以及解决跨域问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!