vue3+ts 封装axios

在项目开发的过程中需要与后端进行交互，我们需要使用 axios 来实现发送网络请求

1. 安装axios

yarn add axios

在 /src 目录下创建 utils 文件夹，再创建 request.ts 文件，这个文件是对 axios 进行一个二次封装

// /src/utils/request.ts
import axios from "axios";
// import router from "../router";

// 利用axios对象的create方法，创建axios实例（基础路径，超时时间）
const request = axios.create({
    baseURL: 'http://1xx.xxx.xx.xxx:xxxx',    //注意！！这里是全局同意加上了 '/api' 前缀，也就是所有接口都会加上 '/api' 前缀，页面里面写接口就不要加 '/api'
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// （鉴权）
request.interceptors.request.use(config => {
    const adminJson = localStorage.getItem("token")
    if (adminJson) {
        //设置请求头
       config.headers.Authorization = "Bearer " +adminJson
    }
    return config
},error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
// request.interceptors.response.use(
//     response => {
//         let res = response.data;
//         //兼容的服务器返回的字符串数据
//         if (typeof res === 'string') {
//             res = res ? JSON.parse(res) : res
//         }
//         if (res.code === '401') {
//             router.push('/login')
//         }
//         return res;
//     },
//     error => {
//         console.log('arr' + error)
//         return Promise.reject(error)
//     }
// )

export default request

2. 调用接口

在 /src 目录下创建 api 的目录，统一管理接口，在 /api 目录下创建 gethttp.ts 文件 统一管理 get 方法请求

// /src/api/gethttp.ts
import request from "../utils/request"

// 获取登录用户所有信息
export const getUser = (id: any) => {
    return request.get(`/getUser?id=${id}`)
}

在vue页面去调用接口

<script setup lang="ts">
import { onMounted } from 'vue';
import { getUser } from '../../api/gethttp';

async function getUser() {
    const id= localStorage.getItem('id')
    const res = await getUser(id)
    console.log(res);
}

onMounted(() => {
    getUser()
})
</script>