配置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; //文件idfileName: 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('/list', { params });
};

5. 使用

在chrome的network中可以看到请求了http://127.0.0.1:9000/api/list?id=2


使用yarn安装与卸载包_码农键盘上的梦的博客-CSDN博客

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！