Vue3封装axios

1、安装axios

npm install axios
1

2、安装qs

npm install qs
1

3、在根目录下的src里创建创建封装文件request.js放在api文件夹里：src/api/request.js，request.js代码如下

import axios from 'axios';
import QS from 'qs';

const api = axios.create({
    baseURL: 'http://127.0.0.1:1008', // 所有请求的公共地址部分
    timeout: 3000 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
})



axios.defaults.baseURL = 'http://127.0.0.1:1008';

axios.interceptors.request.use(
    config => {
        config.headers.token = sessionStorage.getItem('token');
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        if (error.response && error.response.status) {
            switch (error.response.status) {
                case 401:
                	//异常处理
                    break;
                case 403:
                    break;
                case 404:
                    break;
                default:
                    return Promise.reject(error.response);
            }
        }
        return Promise.reject(error);
    }
);

const $get = (url, params) => {
    return new Promise((resolve, reject) => {
        api.get(url, { params })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err);
            });
    });
};

const $post = (url, params) => {
    return new Promise((resolve, reject) => {
        api.post(url, QS.stringify(params), {
            responseType: 'json', // 设置响应类型为json
        }).then(res => {
            resolve(res.data);
        })
            .catch(err => {
                reject(err);
            });
    });
};

export default {
    install: (app) => {
        app.config.globalProperties.$get = $get;
        app.config.globalProperties.$post = $post;
        app.config.globalProperties.$axios = axios;
    }
};

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

4、在main.js引入，代码如下：

import './assets/main.css'

import { createApp } from 'vue'
import http from './api/request' //这一段
import App from './App.vue'

const app = createApp(App)

app.use(http) //还有这一段

app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12

5、在使用的组件里使用方法如下：

methods: {
    test() {
      this.$post('/ksai/chat/getchatlist', { data: 'example' }).then(data => {
        console.log(data); // 在这里处理返回的数据
      }).catch(error => {
        console.error(error); // 在这里处理错误
      })
    }
  }
1
2
3
4
5
6
7
8
9

这样就大功告成啦！！！