首先先安装axios

npm install axios --save

第二步创建封装的请求接口（utils里新建一个叫http.ts文件）

毕竟是新手向的，一般来说直接跟着复制就能使用，或者说自己微调一下

.env文件就不放出来了，自己创建一个

token记得需要自己修改

import axios from "axios";
import { Message } from "tdesign-vue-next";

export const http = (options: any) => {
  return new Promise((resolve, reject) => {
    // create an axios instance
    const service = axios.create({
      baseURL: import.meta.env.VITE_URL_BASE, // api 的 base_url 注意 vue3 .env文件有强制性的 VITE_ 开头
      //   baseURL: 'https://www.baidu.com/api',  // 固定api
      timeout: 80000, // request timeout
    });

    // request interceptor
    service.interceptors.request.use(
      (config: any) => {
        let token: string = ""; //此处换成自己获取回来的token，通常存在在cookie或者store里面
        let token: any = localStorage.getItem('token'); //此处换成自己获取回来的token，通常            存在在cookie或者store里面
        if (token) {
          // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
          config.headers["Authorization"] = 'Bearer ' + token;
        }
        return config;
      },
      (error) => {
        // Do something with request error
        console.log("出错啦", error); // for debug
        Promise.reject(error);
      }
    );

    // response interceptor
    service.interceptors.response.use(
      (response) => {
        return response.data;
      },
      (error) => {
        console.log("err" + error); // for debug
        if (error.response.status == 403) {
          Message.error("错了");
        } else {
          Message.error("服务器请求错误，请稍后再试");
        }
        return Promise.reject(error);
      }
    );
    // 请求处理
    service(options)
      .then((res) => {
        resolve(res);
      })
      .catch((error) => {
        reject(error);
      });
  });
};

export default http;

第三步调用我们刚刚封装好的逻辑（新建文件夹models，文件index.ts）

import { http } from "../utils/http";

// 调用测试
export function getTest() {
  return http({
    url: "/juzi", //此处为自己请求地址
    method: "get",
  });
}

export function postText(params: any) {
  return http({
    url: "/chaju", //此处为自己请求地址
    method: "post",
    data: params,
  });
}

第四步页面上调用

<script setup lang="ts">
import { onMounted } from "vue";
import { getTest, postText } from "./models/index";

onMounted(() => {
  getTest()
    .then((response) => {
      console.log("结果", response);
    })
    .catch((error) => {
      console.log("获取失败！");
    });

  
  let params = {
    title: "juzi",
    name: "chaju",
  };
  postText(params)
    .then((res) => {
      console.log(res);
    })
    .catch((error) => {
      console.log("获取失败！");
    });
});
</script>

好了，封装axios就是芥末简单。

转载于:vue3+ts+axios请求封装_51CTO博客_vue3 axios 封装