This kind of code should be working fine
<script> export default { async fetch() { this.response = await axios .get(`/api${this.$route.path}`, { // faster than this.$nuxt.context.route.path headers: { 'X-AUTH-TOKEN': process.env.SECURE_TOKEN, 'Content-Type': 'application/json', }, }) .then((res) => { // ❌ this is useless because you're already using await above const results = res.data.content.slice(0, 40) return results() }) .then((res) => { // ❌ this is useless because `slice` is NOT async const results2 = res.data.content.slice(20, 40) return results2() }) }, } </script>
Otherwise, I can also recommend a better approach overall, using async/await and not mixing it with .then at all, like this
<script> export default { async fetch() { const response = await axios.get( `/api${this.$route.path}`, { headers: { 'X-AUTH-TOKEN': process.env.SECURE_TOKEN, 'Content-Type': 'application/json', }, } ) const results = response.data.content.slice(0, 40) const results2 = results.data.content.slice(20, 40) }, } </script>
PS: note that some things are not async, hence do not need await (or .then at all).
It can even be shorten to the following
<script> export default { async fetch() { const response = await this.$axios.$get( // 👈🏻 using the shortcut $get `/api${this.$route.path}`, { headers: { 'X-AUTH-TOKEN': process.env.SECURE_TOKEN, 'Content-Type': 'application/json', }, } ) const results = response.content.slice(0, 40) // 👈🏻 no need for `.data` here const results2 = results.content.slice(20, 40) // 👈🏻 same here }, } </script>
Thanks to the shortcuts available with the axios module that you should be using anyway.
As of why you should use async/await, it's just more lisible and available everywhere already (IE is dead). Here is some more info about the whole async/await thing: https://javascript.info/async-await
Far prettier than this kind of syntax (also named callback hell)
