vue3+ts二次封装axios_vue3+ts 二次封装axios

还有一种更精细的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;
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

vue页面引入

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

1
2
3
4
5
6
7
8

分开使用（把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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

vue使用

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

其他方式(带方法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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

vue使用

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