8. Load Data from Backend

There are multiple ways that we can get data from backend.

  • First, make sure your backend has already started.

    • You can simply test your backend if is started on broswer via http://127.0.0.1:8000.

    • If the backend runs well, you will see {“message”: “Hello World”} on the broswer.

  • Then, let’s connect backend from frontend, in Model.vue file (acturelly, you can connect the backend in any file, the code is same).

    • There are two ways (fetch, axios) that we can use to connect the backend.

    • Via fetch:

      You may notice there is a async fetch() function in Model.vue file, we can write the fetch function in it.

      The benefit for us to make a request in the fetch function is the nuxt will run async fetch() before render the html, so we can get the data more fast.

       1async fetch() {
 2     this.helloworld = await fetch(
 3         'http://127.0.0.1:8000/hello/model'
 4       ).then(res => res.json())
 5       console.log(this.helloworld);
 6
 7       this.model = await fetch(
 8         'http://127.0.0.1:8000/api/model'
 9       ).then(res => res.blob())
10
11       console.log(this.model);
12},

      Also, we can write the fetch function in other area, e.g, in created or method:

      • created:

      1created: async function (){
2    this.model = await fetch(
3        'http://127.0.0.1:8000/api/model'
4    ).then(res => res.blob())
5},

      • method:

       1mounted() {
 2    this.start();
 3},
 4
 5methods: {
 6    async start(){
 7        this.model = await fetch(
 8            'http://127.0.0.1:8000/api/model'
 9        ).then(res => res.blob())
10
11        console.log(this.model);
12    }
13},
    • Expect fetch, we also can use axios to make a request to backend.
      1<script>
2    import axios from "axios";
3</script>
      • Then we can do the same things as fetch function.

        • Under async fetch():

         1async fetch() {
 2    await axios.get('http://127.0.0.1:8000/hello/model').then((res)=>{
 3        console.log(res.data);
 4    })
 5    await axios.get('http://127.0.0.1:8000/api/model',{ responseType: "blob" }).then((res)=>{
 6        this.model = res.data;
 7    })
 8
 9    console.log(this.model);
10},

        • In created:

          1created: async function (){
2     await axios.get('http://127.0.0.1:8000/api/model',{ responseType: "blob" }).then((res)=>{
3        this.model = res.data;
4    })
5},

        • In method:

           1mounted() {
 2    this.start();
 3},
 4
 5methods: {
 6    async start(){
 7        await axios.get('http://127.0.0.1:8000/api/model',{ responseType: "blob" }).then((res)=>{
 8            this.model = res.data;
 9         })
10
11        console.log(this.model);
12    }
13},