学习笔记三：Vue3.x+Element Plus项目Demo引入Axios_vue3 elementplus axios

前言

学习 Vite 和 Vue3 并搭建项目 Demo，主要目的是搭项目，对于新手直接跟着操作就可以把项目搭起来，借这个机会自己尝试写写博客，希望对大家有帮助。

• 项目码云（Gitee）仓库地址
• 个人主页

参考链接

• 官网：起步 | Axios Docs
• GitHub：axios
• 手把手教你在 vue3 中使用 axios

（一）安装 Axios

npm i axios
1

// package.json
{
  "name": "vite-vue",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.3.2",
    "element-plus": "^2.2.16",
    "vue": "^3.2.37",
    "vue-router": "^4.0.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "unplugin-auto-import": "^0.11.5",
    "unplugin-vue-components": "^0.22.12",
    "vite": "^3.1.0"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

（二）使用方式一：二次封装 Axios

1.基础配置

在 src 目录下创建 axios 文件夹，新建请求配置文件 request.js 。

// src/axios/request.js
import axios from "axios";

/**
 * axios基础配置
 */
const service = axios.create({
  baseURL: "/api", // api的base_url
  timeout: 600000, // 请求超时时间
  // headers: {
  // "Access-Control-Allow-Credentials": true
  // }, // 请求头信息
  withCredentials: false, // 跨域请求时是否需要使用凭证，默认 false
  responseType: "json", // 服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream',默认 json
});

export default service;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.请求拦截器配置

• 可以在发送请求前验证请求头信息。
• 例如是否携带 token ，有 token 说明用户已登录，可以发送请求。

// src/axios/request.js
import axios from "axios";
import { ElMessage } from "element-plus";
import router from "../router";

/**
 * 请求拦截器
 * 函数参数1：在发送请求之前做些什么
 * 函数参数2：对请求错误做些什么
 */
service.interceptors.request.use(
  (config) => {
    //判断token是否存在，存在即已登录
    if (localStorage.token) {
      // 请求头携带token
      config.headers.Authorization = `Bearer ${localStorage.token}`;
    } else {
      // token不存在，即未登录，跳转登录页
      router.replace("/login");
    }
    return config;
  },
  (error) => {
    ElMessage(error);
    return Promise.reject(error);
  }
);
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

3.响应拦截器配置

• 可以在收到响应数据时判断状态码。
• 例如收到 token 过期的状态码时，可以清空本地存储的信息并跳转回登录页。

/**
 * 响应拦截器
 * 函数参数1：对响应数据做点什么
 * 函数参数2：对响应错误做点什么
 */
service.interceptors.response.use(
  (response) => {
    console.log(`code: ${response.data.code}`);
    if (response.data.code === 401) {
      ElMessage("token过期");
      localStorage.removeItem("token");
      router.replace("/login");
    }
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.封装常用的请求API

把项目中常用的请求封装起来会更加优雅。

// src/axios/api.js
import service from "./request";

// 登录
export const Login = (data) => {
  return service({
    url: "/login",
    method: "post",
    data,
  });
};

// Get请求
export const Get = (url, data) => {
  return service({
    url,
    method: "get",
    params: data,
  });
};

// Delete请求
export const Delete = (url) => {
  return service({
    url,
    method: "delete",
  });
};

// Post请求
export const Post = (url, data) => {
  return service({
    url,
    method: "post",
    data,
  });
};

// 上传文件请求
export const PostFile = (url, data, onUploadProgress) => {
  return service({
    url,
    method: "post",
    data,
    headers: {
      "Content-Type": "multipart/form-data",
    },
    onUploadProgress,
  });
};

// Put请求
export const Put = (url, data) => {
  return service({
    url,
    method: "put",
    data,
  });
};

// Patch请求
export const Patch = (url, data) => {
  return service({
    url,
    method: "patch",
    data,
  });
};
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

5.在组件中调用 axios 接口

// src/components/Login.vue
import { Login } from "../axios/api";

// 表单方法
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // // axios接口
      // Login(loginForm).then((response) => {
      //   const { code, msg, data: res } = response.data;
      //   if (code === 0) {
      //     localStorage.setItem("token", res.token);
      //     ElMessage.success(msg ?? "Submitted!");
      //     router.push({
      //       path: "/", // HelloWorld.vue在路由配置文件中定义的路径
      //       params: {
      //         isLogged: true,
      //       },
      //     });
      //   } else {
      //     ElMessage.error(msg);
      //   }
      // });

      // Demo 直接登录
      localStorage.setItem("token", "test token");
      ElMessage.success("Submitted!");
      router.push({
        // path: "/", // HelloWorld.vue在路由配置文件中定义的路径
        name: "HelloWorld", // name 搭配 params 传参、path 搭配 query 传参
        params: {
          isLogged: true,
        },
      });
    } else {
      ElMessage.error("Oops, error submit!");
      return false;
    }
  });
};
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

（三）使用方式二：全局挂载 Axios

1.入口文件引入 axios 并作基础配置

// src/main.js
import { createApp } from "vue";
import "./style.css";
import ElementPlus from "element-plus";
import App from "./App.vue";

// 引入Vue-Router
import Router from "./router";

const app = createApp(App);

// 引入Axios
import axios from "axios";
// 后端接口域名
axios.defaults.baseURL = "https://XXX.com";

app.use(ElementPlus);
app.use(Router);
app.mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.全局挂载 axios

将 axios 挂载到全局自定义属性 globalProperties 上。

// src/main.js
app.config.globalProperties.$http = axios;
1
2

3.组件中访问自定义属性 $http

1）Opposition API

每个组件可以通过 this 直接访问到全局挂载的自定义属性。

// src/components/Login.vue
this.$http.get("/login");
1
2

2）Composition API

由于 setup 中没有 this ，需要使用 getCurrentInstance 来获取上下文。

// src/components/Login.vue
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
proxy.$http.get("/api/login").then((response) => {
  console.log(response);
});
1
2
3
4
5
6