Published at 2 years ago

提问--如何获取axios的响应数据?

axios.post(
    '/login',
    {username: args.username,password: args.password}
).then(res=>{
    user = res.data
})

const user

我发送了一个axios请求, 用于登录; 响应数据是登录用户的信息, 在请求外, 我定义了一个变量user用来接收登陆用户的信息, 但是却接收不到, 在then()里面可以接收到, 请问我该如何在then()外面也能接收到数据呢?

axios

176 views

Comments

登录后评论

jetboom

·2 years ago

异步代码外无法获取到值了，比如下面代码：

let user = 'abc';
axios.post(
    '/login',
    {username: args.username,password: args.password}
).then(res=>{
    user = '123'; // 123
});

console.log(user); // abc

打印出来的是 abc，不是 123，因为 axios 是异步的，下面的打印语句会直接输出，不会等待异步执行结束。如果你要等待那么可以用 asnyc 和 await 语法：

async function test() {
    let user = 'abc';
    const res = await axios.post('/login', {...});
    user = res.data; 
    console.log(user); // 这里打印的就是 res.data
}

具体原理看 MDN 文档：async_function

luawang

·2 years ago

1、请求是异步的，所以执行的结果会delay, 在外面直接拿是拿不到的

2、用户的信息处理可以放在then里面处理

3、可以使用async函数

HD Superman

·2 years ago

可以参考下 pinia 的异步 actions 写法：actions，用 async 函数实现：

import { mande } from 'mande'

const api = mande('/api/users')

export const useUsers = defineStore('users', {
  state: () => ({
    userData: null,
    // ...
  }),

  actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // let the form component display the error
        return error
      }
    },
  },
})

用 this.userData 存放异步请求回来的数据。