Vue3 TypeScript 封装axios_vue3+ts 封装axios

1.首先安装 axios相关依赖，与TypeScript 类型声明

npm install @types/axios --save-dev

    或

npm install axios vue-axios -S

  2.vue3调用axios

//先引入在页面文件
import axios from "axios";
//在setup函数中定义请求函数
const fetchData = async () => {
      try {
        const response = await axios.get(
          "http://47.94.4.201/index.php/index/index/getcode"
        );
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    };
//在生命周期或点击事件调用
 fetchData();

     使用vue3+ts 封装axios

                   1）.在src路径创建一个api文件夹  在api下创建一个http.ts

                   2）.在http.ts写入

import axios, { InternalAxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
 
const axiosInstance: AxiosInstance = axios.create({
 baseURL: 'http://47.94.4.201/index.php/index/index/getcode',
 timeout: 5000,
});
 
// 添加请求拦截器
axiosInstance.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
  // 在发送请求之前做些什么
  return config;
  },
  (error: any) => {
  // 处理请求错误
  return Promise.reject(error);
  },
);
 
// 添加响应拦截器
axiosInstance.interceptors.response.use(
  (response: AxiosResponse) => {
  // 对响应数据做点什么
  return response;
  },
  (error: any) => {
  // 处理响应错误
  return Promise.reject(error);
  },
);
 
export default axiosInstance;

                  3）.页面文件

//先引入
import api from "@/api/http";
 
 api
    .get("/")
    .then((response) => {
       console.log(response.data);
    })
    .catch((error) => {
       console.error(error);
    });

                4）.想要axios二次封装，需要在api文件夹创建一个http.ts
 

import http from '@/api/api';
export const getCode = () => {
    return http.get('/index.php/index/index/getcode');
 };

                   二次封装后在页面文件，少许更改

vue
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getCode } from "@/api/http";
 
const code = ref<any>();
 
onMounted(() => {
  getCode()
    .then((response) => {
      code.value = response.data.msg;
    })
    .catch((error) => {
      console.error(error);
    });
});
 
const login = () => {
  console.log(name.value);
};
</script>

      二次封装axios，封装get 、post方法

//api.ts
import axios, { InternalAxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
 
const http: AxiosInstance = axios.create({
 baseURL: 'http://47.94.4.201',
 timeout: 5000,
});
 
// 添加请求拦截器
http.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
  // 在发送请求之前做些什么
  return config;
  },
  (error: any) => {
  // 处理请求错误a
  return Promise.reject(error);
  },
);
 
// 添加响应拦截器
http.interceptors.response.use(
  (response: AxiosResponse) => {
  // 对响应数据做点什么
  return response;
  },
  (error: any) => {
  // 处理响应错误
  return Promise.reject(error);
  },
);
export const get = <T>(url: string, config?: InternalAxiosRequestConfig): Promise<T> => {
  return http.get<T>(url, config).then(response => response.data);
};
 
export const post = <T>(url: string, data?: any, config?: InternalAxiosRequestConfig): Promise<T> => {
  return http.post<T>(url, data, config).then(response => response.data);
};
export default http;

//http.ts
import {get,post} from '@/api/api'
export const getCode = () => {
    return new Promise((resolve, reject) => {
        get("/index.php/index/index/getcode")
          .then((res) => {
            resolve(res);
          })
          .catch((err) => {
            reject(err);
          });
      });
};

//页面文件
//引入
import { getCode } from "@/api/http";
//声明
const code = ref<any>();
 
onMounted(() => {
  getCode().then((ser: any) => {
    code.value = ser.msg;
  });
});