概述

封装了Axios请求，可以添加请求拦截器以便在发送请求之前做些什么（例如统一加JWT请求头给后端验证），还可以添加响应拦截器以便对响应数据做点什么

代码实现

安装Axios

1
npm install axios

封装Axios请求

封装了三个方法：get请求、post请求、文件上传

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/**
 * 引入axios
 */
import axios from "axios";

/**
 * 请求的IP地址和端口
 * @type {string}
 */
const baseUrl = "http://localhost:8080";

/**
 * 创建axios实例
 * @type {AxiosInstance}
 */
const httpService = axios.create({
    //url前缀-'http:xxx.xxx'
    //baseURL: process.env.BASE_API, // 需自定义
    baseURL: baseUrl,
    //请求超时时间
    timeout: 3000
});

/**
 * 添加请求拦截器
 */
httpService.interceptors.request.use(function (config) {
    //在发送请求之前做些什么
    //设置请求头token
    config.headers.token = window.sessionStorage.getItem('token');
    return config;
}, function (error) {
    //对请求错误做些什么
    return Promise.reject(error);
});

/**
 * 添加响应拦截器
 */
httpService.interceptors.response.use(function (response) {
    //对响应数据做点什么
    return response;
}, function (error) {
    //对响应错误做点什么
    return Promise.reject(error);
});

/*网络请求部分*/

/**
 * get请求
 *
 * @param url 请求地址
 * @param params 参数
 * @returns {Promise<unknown>}
 */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'get',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/**
 * post请求
 *
 * @param url 请求地址
 * @param params 参数
 * @returns {Promise<unknown>}
 */
export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/**
 * 文件上传
 *
 * @param url 请求地址
 * @param params 参数
 * @returns {Promise<unknown>}
 */
export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: {'Content-Type': 'multipart/form-data'}
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

export function getServerUrl() {
    return baseUrl;
}

export default {
    get,
    post,
    fileUpload,
    getServerUrl
}

使用

使用前先在页面引入，关于为什么有个@去参考博客：使用 Vite 创建 Vue3 项目 | LeDao’s Blog (zoutl.cn)

1
2
//@是/src的路径别名
import axiosUtil from '@/util/axios';

使用时需要使用到async和await关键字，这两个关键字的用法可以参考博客：JavaScript中的async/await详解 - gaozejie - 博客园 (cnblogs.com)

其它使用了async关键字的方法调用时要在方法前加上await关键字，例如：await handleLogin();，虽然可以不加await关键字，但是会有提示让我们加上

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
//下面一行使用到async关键字
const handleLogin = async () => {
  if (form.value.userName === "") {
    ElMessage.error("用户名不能为空");
    return false;
  }
  if (form.value.password === "") {
    ElMessage.error("密码不能为空");
    return false;
  }
  let params = new URLSearchParams();
  params.append("userName", form.value.userName);
  params.append("password", form.value.password);
  let url = '/administrator/login';
  //使用try...catch或.catch对async函数进行异常处理，不处理的话可不加
  try {
    //下面一行使用到await关键字
    const result = await axiosUtil.get(url, params);
    if (result.data.code === 0) {
      window.sessionStorage.setItem("userName", result.data.userName);
      window.sessionStorage.setItem("administratorId", result.data.id);
      window.sessionStorage.setItem("token", result.data.token);
      router.replace('/main');
    } else if (result.data.code === 500) {
      ElMessage.error(result.data.msg);
    }
  } catch (err) {
    console.log("error:" + err);
    ElMessage.error("服务器出错，请联系管理员！");
  }
}