Axios二次封装与Api解耦

在未封装的情况下与解耦的情况下，面对前端每个页面的请求，每个部分的请求，都需要编写大段重复的代码，降低了代码可读与维护
  1. 比如每个请求的请求头token
  2. 每个页面都需要导入的import axios from ‘axios’;
  3. 每个请求都需要编写的http://localhost:8080，包括路径/xxx/xx;
1
2
3
4
5
6
7
8
9
10
11
axios.get()
axios.post()

axios({
	url:'请求的url'
	methods:'请求的方式'
	data:'post传值方式'
	params:'get传值方式'
}).then(res=>{
	console.log(res)//后端返回的数据
})

1.在Src下创建Utils文件夹、再创建request.js

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
import axios from 'axios';
// import store from '@/store'; 

// 1.创建一个 axios 实例
const instance = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 10000, // 请求超时时间
});

// 2.创建请求拦截器
instance.interceptors.request.use(
    (config) => {
        // 如果需要添加头部令牌
        // const token = store.state.token;
        // if (token) {
        //  config.headers['Authorization'] = 'Bearer ' + token;
        // }
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 3.创建响应拦截器
instance.interceptors.response.use(
    (response) => {
        return response.data;
    },
    (error) => {
        return Promise.reject(error);
    }
);

export default instance;

2.在Src下创建api文件夹、创建index.js

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
import service from '@/utils/request';

export function login(username, password) {
    return service({
        url: '/api/auth/login',
        method: 'post',
        params: {
            username,
            password,
        },
    });
}

export function signUp(username, password) {
    return service({
        url: '/api/auth/register',
        method: 'post',
        params: {
            username,
            password,
        }
    })

}

//获取xx列表接口，get方式传参用params
export function getList(params) {
    return service({
        url: '/api/getList',
        method: 'get',
        params
    })
}

3.使用

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
<template>
  <div>
    <form @submit.prevent="onSubmit">
      <input v-model="loginForm.username" placeholder="用户名" />
      <input type="password" v-model="loginForm.password" placeholder="密码" />
      <button type="submit">登录</button>
      <button type="button" @click="onSignUp">注册</button>
    </form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
// 引入api下的index.js
import { login, signUp } from '@/api';

// 表单数据
const loginForm = ref({
  username: '',
  password: ''
});

// 登录
const onSubmit = async () => {
  if (!loginForm.value.username || !loginForm.value.password) {
    alert("用户名和密码不能为空");
    return;
  }
    
    //调用api/index/login
  const response = await login(loginForm.value.username, loginForm.value.password);
  if (response.code === 200) {
    alert("登录成功");
    // 登录成功后的逻辑
  } else {
    alert("登录失败");
    // 处理错误情况
  }
}

// 注册
const onSignUp = async () => {
  if (!loginForm.value.username || !loginForm.value.password) {
    alert("用户名和密码不能为空");
    return;
  }
  const response = await signUp(loginForm.value.username, loginForm.value.password);
  if (response.code === 200) {
    alert("注册成功");
    // 注册成功后的逻辑
  } else {
    alert("注册失败");
    // 处理错误情况
  }
}
</script>