Vue3 | axios封装、调用后端接口、前端增删查改

需求

• 假设后端接口
  • POST: /xxx/add
  • POST: /xxx/delete/{id}
  • GET: /xxx/list?param={valua}
  • POST: /xxx/update

代码

1. 安装axios

• axios：
• 安装axios：
  • npm包管理：npm install axios
  • yarn包管理：yarn add axios

2. 单一调用接口请求

• 不满足项目大量接口访问的需求

axios.post(`/api/xxxx/xxxx?xxx=${xxx}`, { ...data })
.then((result) => {
    if (result.errno) { .... }
    else { .... } })
.catch((err) => { .... })

3. 封装axios: src/utils/request.js

• 须知：
  • 直接调用接口：
• 代码

import axios from "axios";
import store from "@/store";
import router from "@/router";

const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 0, });

service.interceptors.request.use();

service.interceptors.response.use();

export default service;

- 配置接口：src/api/page.js，post请求的参数为`data`,get请求的参数为`params`
```src/api/page.js
import request from "@/util/request";

export function addPage(data) {
    return request({
        url: `/xxx/add`,
        method: "post",
        data,
    });
}

export function deletePage(id) {
    return request({
        url: `/xxx/delete/${id}`
        method: "post",
    });
}

export function listPage(id) {
    return request({
        url: `/xxx/list?param=${id}`
        method: "get",
    });
}

export function updatePage(data) {
    return request({
        url: `/xxx/update`,
        method: "post",
        data,
    });
}

4. 调用接口：src/views/page.vue，listPage的数据显示在table上，add和update公用一个dialog，dialog上有一个submit按钮用于提交

<template>
</template>

<script>
import {
    addPage,
    deletePage,
    listPage,
    updatePage
} from "@/util/page.js";

export default {
    data() {
        return {
            tableLoading: false,
            tableData: {},
            dialogVisible: false,
            dailogTitle: "Create List",
        }
    },
    mounted: {
        this.fetchList();
    },
    methods: {
        async fetchList(params = {}) {
            try {
                this.tableLoading = true;
                const res = listPage(this.currentId);
                if(res.code === 20000) {
                    this.tableData = res.data.pageList;  //具体看返回数据
                }
            } catch (error) {
                console.log("fetch error: ", error);
            } finally {
                this.tableLoading = false;
            }
        },
        async addList() {
            this.dialogVisible = true;
            this.dailogTitle = "Create List";
            this.listForm = {}
        },
        async submitList() {
            let res = {};
            if(!this.listForm.id) {
                res = await updateList({...this.listForm,});
            } else {
                res = await addList({...this.listForm,});
            }
            if(res.code === 20000) {
                this.fetchList();
                this.$message.success("success");
                this.dialogVisible = false;
            }
        },
        async deleteList(id) {
            try {
                await ElMessageBox.confirm {
                    "Proxy will delete the data. Continue?",
                    "Warning",
                    {
                        confirmButtonText: "OK",
                        cancelButtonText: "Cancel",
                        type: "warning",
                    }
                };
                const res = await deletePage(id);
                if(res.code === 20000) {
                    this.fetchList();
                    this.$message.success("success");
                }
            } catch (error) {
                if(error !== "cancel") {
                    console.log("delete error: ", error);
                } else {
                    ElMessage({
                        type: "info",
                        message: "Delete cancelled",
                    });
                }
            }
        },
        
    },
}
</script>