vue3 Axios封装使用

先安装axios：

npm install axios

第一步：项目src下创建一个名为request的文件夹（看一下示例图）：

然后在request下创建两个api.ts和index.ts的文件

api.ts里的内容：（url写你自己的接口）

//我要用到的一些接口
import service from "@/request/index";
 
// 接口
export function login() {//接口ILoginData接口的变量名
    return service({
        url: "/index.php/index/index/index",      //写你自己的接口
        method: "GET" 
    })
}
 
// // 接口
// export function getGoodsList(){
//     return service({
//         url: "/getGoodsList",
//         method: "GET"
//     })
// }

index.ts里的内容：（baseURL：“里写你自己的接口地址“）

import axios from "axios";
//创建axios实例
const service = axios.create({
	baseURL: " ",   //写你自己的接口地址
	timeout: 5000,//超时时间
	headers: {//编译语言
		"Content-type": "application/json;charset=utf-8"
	}
})
//请求拦截
//就是你请求接口的时候，我会先拦截下来，对你的数据做一个判断，或者携带个token给你
service.interceptors.request.use((config) => {//请求的数据
	config.headers = config.headers || {}  // 没有数据的话就设置为空设置为数据
	if (localStorage.getItem("token")) {//先确保登录
		config.headers.token = localStorage.getItem("token") || ""
	}
	return config//必须返回出去，不然请求发不出去
}, error => {
	//处理错误请求
	return Promise.reject(error)
})
//响应拦截：后端返回来的结果
service.interceptors.response.use((res) => {
    
	const status: number = res.status//code是后端的状态码
	if (status !== 200) {
		//请求失败（包括token失效，302，404...根据和后端约定好的状态码做出不同的处理）
		return Promise.reject(res)
	} else {
		//请求成功
		console.log(res, '成功----')
		return Promise.resolve(res.data)
	}
}, (err) => {
	console.log(err, '错误信息的处理')//错误信息的处理
	//处理错误响应
	return Promise.reject(err)
})

//因为别的地方要用，所以就把实例暴露出去，导出
export default service

在你自己的页面使用引入api接口（以下示例代码是我的调用接口，改成你自己的）：

<template>
    <div>
       <ul v-for="(item,index) in arr" :key="index">
        <li>{{item}}</li>
       </ul>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { login } from '../request/api'; // 引入你的API接口

// 定义一个响应式引用以存储API响应
// const response = ref(null);

const arr = ref<string[]>([]); 

// 在组件挂载后调用接口
onMounted(async () => {
  login().then(res => {
    // response.value = res;
    arr.value = res.data as string[];
    // console.log(res.data);
  })
});
</script>