return axios中的网络请求结果

最新推荐文章于 2025-05-21 17:35:09 发布

原创最新推荐文章于 2025-05-21 17:35:09 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#axios

遇到的bug 专栏收录该内容

4 篇文章

订阅专栏

本文讲述了在使用axios进行网络请求时遇到的一个问题，即在Promise.then中return的结果导致返回值为undefined。文章解释了这是因为Promise.then创建了一个新的Promise，回调函数的返回值被链式传递，而不是直接作为原方法的返回值。为了解决这个问题，作者提出了正确的获取回调函数返回值的方法。

今天修复一个bug，需要先通过axios获取用户数据，再根据获取到的数据是否为空，判断用户是否存在。但在这个过程里出现了一个问题。

// 判断用户是否存在
if(isUserExits(this.userId)) {
	console.log('进行操作')
	console.log(isUserExits(this.userID)) // --- 结果是 undefined
}

// isUserExits方法
methods: {
   isUserExits(userId) {
     Axios.get('/xx/xx',{
       params: {
         userId
       }
     })
     .then(res => {
       // 数据为空，则用户不存在，返回false，否则反之
       return res.data.length == 0 ? false : true
     })
     .catch(err => {
       console.log(err)
   	   return false
     })
   }
}

执行isUserExits()方法的返回值是undefined，而非预想中的bool值
这是由于在Promis.then中的return语句返回的是一个[[PromiseValue]]

也就是说

return res.data.length == 0 ? false : true

这句返回的其实是[[PromiseValue]]: true。而isUserExits()方法本身并没有任何返回值，因此打印的结果是undefined。
这是由于Promise的then()方法的返回值是一个新创建的Promise对象，而then()方法中的res回调函数的返回值会被resolve()到新创建的Promise对象当中去

而要想获取到res回调函数的返回值，也就是我想要的结果，就得采用下面这种方式

 this.isUserExits(this.userId)
 .then(res => {
   if(res) {
     console.log('TO DO')
   } else {
     console.log('用户不存在')
   }
 })
 .catch(err => console.log(err))

// isUserExits方法
methods: {
	// isUserExits方法现在返回的是一个Promise对象
	// 它的PromisValue就是我想要的bool值了
    isUserExits(userID) {
      return Axios.get('/xx/xx',{ 
      // 第一个return，返回的是一个Promise对象
        params: {
          userId
        }
      })
      .then(res => {
        return res.data.length == 0 ? false : true
        // 第二个return，返回的是Promise对象的PromiseValue
      })
      .catch(err => console.length(err))
    }
 }