Vue3 TypeScript 封装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;
  });
});

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泥木马

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值