配置axios
1. 安装
yarn add axios
2. 新建utils/axios.ts
import axios from 'axios';
/*
* 创建实例
* 与后端服务通信
*/
const HttpClient = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
});
/**
* 请求拦截器
* 功能:配置请求头
*/
HttpClient.interceptors.request.use(
(config) => {
const token = '222';
config.headers.authorization = 'Bearer ' + token;
return config;
},
(error) => {
console.error('网络错误,请稍后重试');
return Promise.reject(error);
},
);
/**
* 响应拦截器
* 功能:处理异常
*/
HttpClient.interceptors.response.use(
(config) => {
return config;
},
(error) => {
return Promise.reject(error);
},
);
export default HttpClient;
3. 新建apis/model/userModel.ts
定义请求参数类型与返回数据类型
//定义请求参数
export interface ListParams {
id: number; //用户id
}
export interface RowItem {
id: number; //文件id
fileName: string; //文件名
}
//定义接口返回数据
export interface ListModel {
code: number;
data: RowItem[];
}
4. 新建apis/user.ts
import HttpClient from '../utils/axios';
import type { ListParams, ListModel } from './model/userModel';
export const getList = (params: ListParams) => {
return HttpClient.get<ListModel>('/list', { params });
};
5. 使用
<script setup lang="ts">
import { getList } from '@/apis/user';
getList({ id: 2 });
</script>
在chrome的network中可以看到请求了http://127.0.0.1:9000/api/list?id=2
使用yarn安装与卸载包_码农键盘上的梦的博客-CSDN博客