vue3+ts二次封装axios

@小朱呀路

已于 2023-07-14 17:10:52 修改

阅读量1.6k

点赞数 1

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2023-01-02 22:01:33 首次发布

本文链接：https://blog.csdn.net/weixin_45441173/article/details/128525674

版权

vue3 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

还有一种更精细的axios封装包括 baseURL的拦截单个接口的拦截全局的拦截环境变量的配置等参考下面的链接

参考这篇本人写的文章vue3+ts二次封装axios

当然下面这个也可以使用

utils/http.ts

import axios from "axios";
import type { AxiosRequestConfig, AxiosResponse } from "axios";
const instance = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 5000,
});

instance.interceptors.request.use(
  (config): any => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

interface Data {
  [index: string]: unknown;
  // name:'',
  // age:''
}
interface Http {
  get(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  post(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  put(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  patch(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  delete(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
}
const http: Http = {
  get(url, data, config) {
    return instance.get(url, {
      params: data,
      ...config,
    });
  },
  post(url, data, config) {
    return instance.post(url, data, config);
  },
  put(url, data, config) {
    return instance.put(url, data, config);
  },
  patch(url, data, config) {
    return instance.patch(url, data, config);
  },
  delete(url, data, config) {
    return instance.delete(url, {
      data,
      ...config,
    });
  },
};

instance.interceptors.response.use(
  (response): any => {
    const res = response.data;
    return res;
  },
  (error) => {
    console.log("err" + error);

    return Promise.reject(error);
  }
);
export  default  http;

vue页面引入

  import  http from "@/utils/http"; 
  http.post("/users/login", {
    email: "xxx@imooc.com", // 登录邮箱
    pass: "huangrong", // 登录密码
  }).then(res=>{
    console.log(res,'res')
  });

分开使用（把ts和接口部分提取出来）

utils/http.ts

import axios from "axios";
import type { AxiosRequestConfig, AxiosResponse } from "axios";
const instance = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 5000,
});

instance.interceptors.request.use(
  (config): any => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
instance.interceptors.response.use(
  (response): any => {
    const res = response.data;
    return res;
  },
  (error) => {
    console.log("err" + error);

    return Promise.reject(error);
  }
);
export  default  instance

api/login.ts

import instance from "@/utils/http";
import type { AxiosRequestConfig, AxiosResponse } from "axios";

interface Data {
  [index: string]: unknown;
  // name:'',
  // age:''
}
interface Http {
  get(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  post(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  put(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  patch(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  delete(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
}
const http: Http = {
  get(url, data, config) {
    return instance.get(url, {
      params: data,
      ...config,
    });
  },
  post(url, data, config) {
    return instance.post(url, data, config);
  },
  put(url, data, config) {
    return instance.put(url, data, config);
  },
  patch(url, data, config) {
    return instance.patch(url, data, config);
  },
  delete(url, data, config) {
    return instance.delete(url, {
      data,
      ...config,
    });
  },
}; 
export  default  http;

vue使用

import  http  from "../../api/login";  
 http.post("/users/login", {
  email: "xxx@imooc.com", // 登录邮箱
  pass: "huangrong", // 登录密码
}).then(res=>{
  console.log(res,'res')
});

其他方式(带方法eg:点击事件)
utils/http.ts**

import axios from "axios";
import type { AxiosRequestConfig, AxiosResponse } from "axios";
const instance = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 5000,
});

instance.interceptors.request.use(
  (config): any => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
instance.interceptors.response.use(
  (response): any => {
    const res = response.data;
    return res;
  },
  (error) => {
    console.log("err" + error);

    return Promise.reject(error);
  }
);
export  default  instance

login.ts

import instance from "@/utils/http";
import type { AxiosRequestConfig, AxiosResponse } from "axios";

  interface Data {
    [index: string]: unknown;
  }
//  interface Logins {
//    login(url:string,data: Data,config?:AxiosRequestConfig): Promise<AxiosResponse>;
//  }
   const lo= {
    login(url,data,config) {
      return instance.post(url,data ,config);
    },
  };
  export default lo

vue使用

  import  lo  from "../../api/login";
   const Login=()=>{
	lo.login("/users/login", {
    email: "xxx@imooc.com", // 登录邮箱
    pass: "huangrong", // 登录密码
  }).then(res=>{
   console.log(res,'res')
  });
}