解决 vue axios 中 一个接口需要另一个接口返回数据的问题

  • vue中的axios与promise (解决 两个或者多个接口 数据依赖的问题)
      var bookList_;   //所有书籍
      var ByBookList_ ; //用户买过的所有书籍
      // new Promise  ES6 的新语法
      var promise = new Promise((resolve, reject) => {
    
      
        this.apis.adminApi
          .bookList({
    
     thisPage, totalPagesDate })
          .then((res) => {
    
    
            resolve(res)
            var data = res.data
            var bookList = data.objList //数据集合
            this.totalData = data.totalData //总页数
            this.thisPage = data.thisPage //当前页
            // localStorage.setItem('bookList_', JSON.stringify(data.objList))
            bookList_ = data.objList
          })
      })
	//只有上一个 接口调用成并且返回数据以后才能调取下面这个方法
      promise.then((res) => {
    
    
       console.log(bookList_)
      
        //获取个人买过的所有书籍
        this.apis.adminApi.selectUserBook(username).then((res) => {
    
    
          var data = res.data
          if (data.code == 200) {
    
    
            this.ByBookList = data.backups2
            ByBookList_ = data.backups2
          }
        })
      })
  • 可以同时调用两个或者 多个接口 对他们返回的数据数据进行二次加工
 /**
         * 所有的书
         */
        var _this = this
        function bookList_(){
    
    
                return   _this.apis.adminApi.bookList({
    
     thisPage, totalPagesDate })
        }
        /**
         * 用户买的所有书
         */
        function ByBookList_(){
    
    
                //获取 登录的这个人的id  存储在了 vuex 中
                var username = _this.$store.state.user.userInfo.id
                return   _this.apis.adminApi.selectUserBook(username)
        }
        axios.all([bookList_(),ByBookList_()])
        .then(axios.spread((res1, res2)=>{
    
    
            console.log(res1,res2)
        }))

猜你喜欢

转载自blog.csdn.net/weixin_44647098/article/details/108554391