vue3项目中使用ts来封装axios请求_vue3+ts axios

第一步：首页安装axios，我这里使用npm安装

npm i axios -S
1

第二步：安装好后，在src文件目录下创建http文件夹，建立request.ts文件，我们的项目环境可能有开发环境、测试环境和生产环境，我们可以通过node的环境变量来匹配我们的默认的请求地址

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}
1
2
3
4
5
6
7
8
9

import axios from 'axios'
const $http = axios.create({
	//设置默认请求地址
	baseURL,
	//设置请求超时时间
	timeout:5000,
	//设置请求头
	headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  }
})
// 先导入vuex,因为我们要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '../../store/index';

// 请求拦截器
$http.interceptors.request.use(config => {        
        // 每次发送请求之前判断vuex中是否存在token        
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },error => {        
        return Promise.error(error);    
})	
//响应拦截
$http.interceptors.response.use(res => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
        if (res.status === 200) {            
            return Promise.resolve(res);        
        } else {            
            return Promise.reject(res);        
        } 
}, error => {            
    	if (error.res.status) {            
            switch (error.res.status) {                
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.Path 
                        }
                    });
                    break;
                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                     Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面Path传过去，登录成功后跳转需要访问的页面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect:router.currentRoute.Path 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 
                // 404请求不存在
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
            }
            return Promise.reject(error.res);
        }
    } 
})
// 别忘记了
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
86

第三步：封装get或者post请求，下面是自己封装的例子

//导入request.ts 目录下的$http
import $http from "./index";

export function getJob(data:any):any{
  return $http({
    url: '/mock/704240/Job',
    method: 'get',
    params: data
  })
}
export function postJob(data: any): any{
  return $http({
    url: '/mock/704240/Job',
    method: 'post',
    data
  })
}
export function getRequirement(): any{
  return $http({
    url: '/mock/704240/Requirement',
    method:'get'
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

第四步：调用自己封装好的函数，来发送请求来获取数据

    const getJoblist = (httpData: any): void => {
      getJob(httpData).then((res: any) => {
        data.jobs = res.data;
        console.log('拿到了数据');
      })
    }
    // setup()下的 onMounted
    onMounted(() => {
      getJob({}).then((res: any) => {
        // console.log(res);
        data.jobs = res.data;
        // console.log(data.jobs);
      })
      getRequirement().then((res: any) => {
        // console.log(res);
        data.option = res.data;
        // console.log(data.option);
      })
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19