(VUEJS) 从 Axios 内部创建的访问方法

Question

我只有一个简单的错误，让我困惑了将近 3 周。

我的问题是，我想从我的 axios API url 末尾的方法“idvideo”返回字符串，但什么也没发生。

您可以在下面的代码中看到。

我一直在寻找解决方案并多次尝试错误，但仍然没有找到任何可以帮助我的最佳答案。

    export default {

        data() {
          return {
            errors: [],
            videos: [],
            items: []

          }
        },

        methods: {
          idvideo: function() {
            const data = this.items
            const result = data.map((item) => {
              return {
                fetchId: item.snippet.resourceId.videoId
              };
            }).sort((a, b) => b.count - a.count);

            var i, len, text;
            for (i = 0, len = result.length, text = ""; i < len; i++) {
              text += result[i].fetchId + ",";
            }
            var x = text.slice(0, -1);
            return(x);
          }

        // Fetches posts when the component is created.
        created() {

          // Ini adalah API utk playlist yang dipilih
          axios.get("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLjj56jET6ecfmosJyFhZSNRJTSCC90hMp&key={YOUR_API_KEY}")
          .then(response => {
            // JSON responses are automatically parsed.
            this.items = response.data.items
          })
          .catch(e => {
            this.errors.push(e)
          }),

          // Ini adalah API utk data yang dipilih
          axios.get('https://www.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&key={YOUR_API_KEY}&id='+this.idvideo())
        .then(response => {
            // JSON responses are automatically parsed.
          this.videos = response.data.items
          })
          .catch(e => {
            this.errors.push(e)
          })
        },
        }

我非常感谢任何可以帮助我的解决方案。如果你们有最好的方法来实现这个功能，请告诉我。

抱歉我的英语不好和任何错误。这是我在这个平台上第二次发布问题。

非常感谢楼主！

Answer 1

由于它们是异步请求，因此我想到了以下解决方案。

解决方案：

在第一个 axios 调用中移动下一个 axios 调用。这是因为，只有在第一次调用后，才会检索“项目”，然后将其分配给this.items，因此下一次 axios 调用将具有来自idvideo() 函数的所需数据。

export default {
    data() {
      return {
        errors: [],
        videos: [],
        items: []

      }
    },

    methods: {
      idvideo: function() {
        const data = this.items
        const result = data.map((item) => {
          return {
            fetchId: item.snippet.resourceId.videoId
          };
        }).sort((a, b) => b.count - a.count);

        var i, len, text;
        for (i = 0, len = result.length, text = ""; i < len; i++) {
          text += result[i].fetchId + ",";
        }
        var x = text.slice(0, -1);
        return(x);
      }

    // Fetches posts when the component is created.
    created() {

      // Ini adalah API utk playlist yang dipilih
      axios.get("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLjj56jET6ecfmosJyFhZSNRJTSCC90hMp&key={YOUR_API_KEY}")
      .then(response => {
        // JSON responses are automatically parsed.
        this.items = response.data.items

        // Ini adalah API utk data yang dipilih
      axios.get('https://www.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&key={YOUR_API_KEY}&id='+this.idvideo())
    .then(response => {
        // JSON responses are automatically parsed.
      this.videos = response.data.items
      })
      .catch(e => {
        this.errors.push(e)
      })
    }
      })
      .catch(e => {
        this.errors.push(e)
      }),
      ,
    }