vue在公共js文件中请求接口导出结果，外部引用.(处理返回结果为promiss)

异步处理：使用async/await在axios请求中获取并返回值

原创于 2022-07-28 10:42:46 发布 · 725 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

vue-element 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在JavaScript中使用async/await与axios配合，解决在axios请求体外部获取响应值的问题，通过示例展示了在Vue组件中正确调用的方法。重点在于理解非同步操作在axios中的应用和在数据处理中的作用。

新建一个js文件
之前试过不加async，await 。但是在axios请求体外部获取不到arr的值，导致无法return。后来查找到这个方法，实测可用。不过在调用时也要做些处理，后面详细说明。如果不是取axios内部的返回值，可以不用async，await，直接在函数中设置变量再return

import axios from 'axios';
async function getDept() {
    var arr = '';
    await axios.get('接口地址')
        .then((response) => {
            arr = response;
        })
    return arr;
}
export {
    getDept
}

在vue文件中调用

<template>
    <div></div>
</template>

<script>
//引用上文写的js文件
import { getDept } from '../../util/index'
export default {
    data() {
        return {
            msg:''
        };
    },
    mounted() {
        this.testdata()
    },
    methods: {
    //这里也要用async，await对应来取值
        async testdata() {
	      let result = await getDept();
	      this.msg= result
	    }
    },
};
</script>