在vue-cli脚手架中创建一个AxiosMethod.js文件用来放公共方法。

开始的代码如下:

export  function post() {
    await axios.post("http://localhost:9090/checkFace").then(function (res) {
        if (res.data.code == 1) {
            ElMessageBox.alert('识别成功', '系统提示', {
                confirmButtonText: 'OK'
            })
            this.$router.push("/");
        } else {
            ElMessageBox.alert('识别失败', '系统提示', {
                confirmButtonText: 'OK'
            })
        }
    }).catch(function (err) {
        console.log(err)
    });
}

当开始测试的时候出现了  警告: Promise returned from xxx is ignored,执行成功但是无法跳转页面。

需要把方法加上async和await。 警告: Promise returned from xxx is ignored 就没有了。

export async function post() {
    await axios.post("http://localhost:9090/checkFace").then(function (res) {
        if (res.data.code == 1) {
            ElMessageBox.alert('识别成功', '系统提示', {
                confirmButtonText: 'OK'
            })
            this.$router.push("/");
        } else {
            ElMessageBox.alert('识别失败', '系统提示', {
                confirmButtonText: 'OK'
            })
        }
    }).catch(function (err) {
        console.log(err)
    });
}

但是出现了新的问题,浏览器警告:无法识别$router

然后我想了想,这虽然是在vue脚手架中,但是是js文件,this指向的应该不是vue对象,在js文件中this指向应该是window。而window中是没有$router的,所以警告无法识别$router。

解决:

在js文件中引入router。

import router from "@/router";
export async function post() {
    await axios.post("http://localhost:9090/checkFace").then(function (res) {
        if (res.data.code == 1) {
            ElMessageBox.alert('识别成功', '系统提示', {
                confirmButtonText: 'OK'
            })
            router.push("/");
        } else {
            ElMessageBox.alert('识别失败', '系统提示', {
                confirmButtonText: 'OK'
            })
        }
    }).catch(function (err) {
        console.log(err)
    });
}

OK 。 搞定。

Logo

前往低代码交流专区

更多推荐