Vue中发送axios请求

  1. 普通的axios请求
  2. 同步发送请求
  3. 文件上传

普通的axios请求

    import axios from 'axios';

    getRightTabelData() {

        axios({
            url: "请求地址",
            method: "post",
            headers: {
                'token': this.$store.state.token
            },
            data: {
                 oaid: this.$cookies.get("username"),
            }

        }).then((res) => {
            if (res.data.result == "success") {
                this.sonTableData = res.data.data
    
            } else {
                pageTips(res.data.info)
            }
        }).catch((err) => {
            console.log(err)
        })
    },

同步发送请求

    import axios from 'axios';


    # 需要用到 async await
    async getRightTabelData() {

        try {
            const res = await axios({
                url: "请求地址",
                method: "post",
                headers: {
                    'token': this.$cookies.get("token")
                },
                data: {
                    oaid: this.$cookies.get("username"),
                }
            });


            if (res.data.result === "success") {
                this.tableData2 = res.data.data
              

            } else {
                pageTips(res.data.info);
            }

        } catch (error) {
            console.log(error);
        }

    },

文件上传

    content-type: multipart/form-data

    // 文件上传成功
    handleSuccess(file, fileList) {
        let filename = file.raw.name
        if (filename.indexOf(".apk") != -1) {
            this.upload = file.raw  // 以文件对象的形式传给后端

            const file_size = file.size / 1024 / 1024
            console.log(`文件大小:` + file_size)
            if (file_size > 30) {
                middlePageTips('不能上传超过30MB的文件!', "error");
            }

            let formData = new FormData()
            formData.append('file', this.upload)
            formData.append("oaid", this.$cookies.get("username"))
            
            formData.append("note", 'apk包')
            formData.append("env", 'prod')
            formData.append("project", 'all_sysytem')

            axios({
                url: "请求地址",
                method: "post",
                data: formData,
            }).then((res) => {

                if (res.data.result == "success") {
                    middlePageTips("文件已上传成功", "success");
                    console.log(res.data)
                }
                else {
                    middlePageTips(res.data.info, "error");
                }


            }).catch((error) => {
                middlePageTips(error.data.info, "error");
            })



        } else {
            this.open2("请上传.apk格式的文件")
            this.$refs.upload.clearFiles()
        }


    },

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。

文章标题:Vue中发送axios请求

本文作者:伟生

发布时间:2025-03-23, 21:38:05

最后更新:2025-03-23, 21:45:41

原始链接:http://yoursite.com/2025/03/23/qianduan_04_vue_study_9_axios/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏