一、前言
前端请求后端数据时,会用到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);
});
五、运行结果
可以看到控制台返回的乱码数据,表示我们请求后台成功了