Question

我试图了解如何在函数中使用axios（https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.js）与我自己的后端交谈以获取一些数据。

以下代码有效。

我需要在函数外部定义一个全局变量来捕获结果。

如果我将变量 myresponse 移动到函数中，我将无法再接收回复。

如何避免全局变量？

var myresponse = "xxx"

function getTimeData() {

    axios.get('/time')
    .then(function (response) {

    console.log(response.data);
        myresponse = response.data;
    })
    .catch(function (error) {
        myresponse = "error";
    });

    return myresponse;

}

console.log(getTimeData())

对于此示例，我在“/ time”运行本地服务器，返回时间字符串。

Answer 1

全局变量可以在axios中使用。由于axios使用AJAX，你不应该回到axios之外。

var myresponse = "xxx"

function getTimeData() {

    axios.get('/time')
    .then(function (response) {
        myresponse = response.data;
        return myresponse;
    })
    .catch(function (error) {
        myresponse = "error";
        return myresponse;
    });
}

console.log(getTimeData())

这会奏效。即使在您的代码中，记录myresponse也不会被设置，但在收到响应后，它将被设置为response.data。

我的vue代码的一部分工作正常。请注意，在创建this.users之后，不会立即获取res.data中的值，但是一旦axios发送req并接收它，它将包含res.data。

var HTTP = axios.create({
            baseURL: URL,
        })
methods:{
                getUsers(){
                    return HTTP.get('/users/admin')
                },
                deleteUsers(user){
                    HTTP.post('/users/admin',{
                        id : user._id
                    })
                    .then(()=>{
                        this.getUsers()
                    })
                }                   
            },
            created(){
               this.getUsers().then(res=>{
                   this.users = res.data;
               })
            }

Answer 2

如果您的最终愿望是记录值，为什么需要一个单独的变量？只需在你的功能中做到这一点。使用async / await：

const getTimeData = async () => {
    try {
        const response = await axios.get( "/timer" );
        console.log( response.data );
    } catch ( error ) {
        console.log( error );
    }
};

getTimeData();

如果要在其他地方使用返回的值，请直接在函数中使用它：

const getTimeData = async () => {
    try {
        const response = await axios.get( "/timer" );
        return somethingElse( response.data );
    } catch ( error ) {
        return errorHanlder( error );
    }
};

getTimeData();

Answer 3

如果您需要从axios收集数据，您可以随时包装返回。

var result;
function getTimeData() {
    return axios.get('/time')
}

getTimeData()
.then(function(res) { 
  result = res.data;
  console.log(result);
})
.catch(function(err) {
  console.error(err)
});

在没有全局变量的javascript函数中使用axios

3 个答案: