Home / MAD2 / Week 5

Week 5 · Vue with APIs: fetch, axios and lifecycle

The one-minute story

By the end of this week you can:

• call a Flask API from Vue with fetch and with axios, inside created or mounted, and with async/await;
• show a loading state and an error state, and handle a failed request correctly;
• build a full CRUD page (list, create, edit, delete) against a Flask REST backend;
• send JSON with the right header and read status codes;
• explain what CORS is, why the browser blocks a request, and enable it with Flask-CORS or avoid it with a dev proxy;
• predict the console output of async/await code with success, HTTP error and network error.

Words you need

Idea 1: Calling an API with fetch

fetch(url, options) returns a Promise of a Response object. The response is not your data: you must ask for the body, which is another promise.

fetch("http://127.0.0.1:5000/api/tasks")
  .then((res) => res.json())          // body -> JavaScript value (also a promise)
  .then((data) => console.log(data))  // use the data
  .catch((err) => console.error(err)); // network failure or a thrown error

console.log("End of script");

Output order: End of script first, then the data. fetch never blocks: JavaScript carries on with the next line and runs the .then code later, when the response arrives. (A real paper asks exactly this: the answer is "End of script, then the JSON".)

The same with async and await

async function getTasks() {
  const res = await fetch("http://127.0.0.1:5000/api/tasks");
  if (!res.ok) throw new Error("HTTP " + res.status);
  return await res.json();
}

getTasks().then((d) => console.log(d)).catch((e) => console.log(e.message));

• await can only be used inside an async function. It gives the resolved value, not the promise.
• An async function always returns a promise. A throw inside it makes that promise reject.
• If you forget await, res is a Promise: res.ok is undefined and res.json is not a function on the promise. A real question presents code like this and asks "what is the error".

async function getResponse(url) {
  try {
    const response = await fetch(url);
    try {
      const data = await response.json();
      if (response.ok) { return data; } else { return response.status; }
    } catch {
      return "Network Error";
    }
  } catch {
    return "Response is not json";
  }
}
getResponse("url").then((data) => console.log(data));

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    if (!response.ok) throw new Error("HTTP error");
    return await response.json();
  } catch (error) {
    if (error.name === "TypeError") return { status: "network error" };
    return { status: "http error" };
  }
}

Idea 2: Calling the API from a Vue component

Where to start the request? In created (data and methods exist, request starts early) or mounted (the page exists). Both are fine for plain API calls; the course examples use either. Then store the answer in data and let Vue re-render.

<div id="app">
  <p v-if="loading">Loading...</p>
  <p v-else-if="error" class="err">{{ error }}</p>
  <ul v-else>
    <li v-for="t in tasks" :key="t.id">{{ t.title }}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: "#app",
    data: { tasks: [], loading: false, error: "" },
    created() { this.loadTasks(); },
    methods: {
      async loadTasks() {
        this.loading = true;
        this.error = "";
        try {
          const res = await fetch("http://127.0.0.1:5000/api/tasks");
          if (!res.ok) throw new Error("HTTP " + res.status);
          this.tasks = await res.json();
        } catch (e) {
          this.error = "Could not load tasks: " + e.message;
        } finally {
          this.loading = false;
        }
      },
    },
  });
</script>

Order of events (verified by running a similar component): the page renders at once with tasks: [] and loading: false; created calls loadTasks, which sets loading = true and returns at the first await; Vue mounts (so mounted runs before the data arrives); when the response comes, tasks is filled, finally sets loading = false, and Vue re-renders the list. finally runs on both success and failure, so the "Loading..." message never gets stuck.

The same with axios

axios is an installed package (npm install axios) or a CDN script. Compared with fetch:

import axios from "axios";   // with the CDN script it is the global `axios`

const res = await axios.get("http://127.0.0.1:5000/api/tasks");
console.log(res.data);                    // already parsed JSON, no .json() step

const created = await axios.post("http://127.0.0.1:5000/api/tasks", { title: "Buy milk" });
// the object is sent as JSON with Content-Type: application/json automatically
console.log(created.status, created.data);

try {
  await axios.get("http://127.0.0.1:5000/api/tasks/999");
} catch (err) {
  if (err.response) console.log(err.response.status);   // server answered 4xx/5xx
  else console.log("network or CORS problem", err.message);
}

Idea 3: Sending data: JSON, headers and status codes

A POST that sends JSON needs three things: the method, the header and the stringified body.

const data = { name: "Aditya", score: 95 };

fetch("/api/submit", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data),
});

• Content-Type: application/json tells Flask that the body is JSON, so request.get_json() works. Without it fetch labels a string body as text/plain, and recent Flask rejects it (415 Unsupported Media Type).
• A real question asks which header is necessary: 'Content-Type': 'application/json' (not multipart/form-data, not application/text, and Accept: */* is not what the server needs).
• Accept tells the server which type you want back; Authorization carries a token (see week 7). A fetch can add any custom header, send images (as FormData or Blob) and use any method.
• For a file upload with FormData, do not set Content-Type yourself; the browser adds the boundary.

Status codes you should react to:

A real question: a fetch("http://127.0.0.1:5000/protected", { method: "GET" }) with no token to a protected route. Answer: the request fails with 401 Unauthorized (fetch itself still resolves; the response has status 401).

Idea 4: A full CRUD page against Flask

Backend (Flask 3, plain routes, in-memory list so it is easy to read). I tested every route with Flask's test client: create returns 201, a missing title returns 400, an unknown id returns 404 and delete returns 204.

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "http://localhost:8080"}})

tasks = [{"id": 1, "title": "Learn Vue", "done": False}]
next_id = 2


@app.get("/api/tasks")
def list_tasks():
    return jsonify(tasks)


@app.post("/api/tasks")
def create_task():
    global next_id
    data = request.get_json(silent=True)
    if not data or not data.get("title"):
        return jsonify({"error": "title is required"}), 400
    task = {"id": next_id, "title": data["title"], "done": False}
    next_id += 1
    tasks.append(task)
    return jsonify(task), 201


@app.put("/api/tasks/<int:task_id>")
def update_task(task_id):
    task = next((t for t in tasks if t["id"] == task_id), None)
    if task is None:
        return jsonify({"error": "not found"}), 404
    data = request.get_json(silent=True) or {}
    task["title"] = data.get("title", task["title"])
    task["done"] = data.get("done", task["done"])
    return jsonify(task)


@app.delete("/api/tasks/<int:task_id>")
def delete_task(task_id):
    global tasks
    before = len(tasks)
    tasks = [t for t in tasks if t["id"] != task_id]
    if len(tasks) == before:
        return jsonify({"error": "not found"}), 404
    return "", 204

Frontend (Vue 2 from a CDN). One helper request handles the checks for every call, so each method stays short. I ran this code against a fake server in a browser-like environment and checked list, add, empty-title error, toggle, delete and network failure.

<div id="app">
  <p v-if="loading">Loading...</p>
  <p v-if="error" class="err">{{ error }}</p>
  <form @submit.prevent="addTask">
    <input v-model.trim="title" placeholder="New task">
    <button :disabled="!title">Add</button>
  </form>
  <ul>
    <li v-for="t in tasks" :key="t.id">
      <span :class="{ done: t.done }" @click="toggle(t)">{{ t.title }}</span>
      <button @click="removeTask(t)">Delete</button>
    </li>
  </ul>
</div>

const API = "http://127.0.0.1:5000/api/tasks";
new Vue({
  el: "#app",
  data: { tasks: [], title: "", loading: false, error: "" },
  created() { this.loadTasks(); },
  methods: {
    async request(url, options) {
      this.error = "";
      const res = await fetch(url, options);
      if (!res.ok) {
        let msg = "HTTP " + res.status;
        try { msg = (await res.json()).error || msg; } catch (e) {}
        throw new Error(msg);
      }
      return res.status === 204 ? null : res.json();
    },
    async loadTasks() {
      this.loading = true;
      try { this.tasks = await this.request(API); }
      catch (e) { this.error = e.message; }
      finally { this.loading = false; }
    },
    async addTask() {                                   // Create
      try {
        const task = await this.request(API, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ title: this.title }),
        });
        this.tasks.push(task);
        this.title = "";
      } catch (e) { this.error = e.message; }
    },
    async toggle(task) {                                // Update
      try {
        const updated = await this.request(API + "/" + task.id, {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ done: !task.done }),
        });
        task.done = updated.done;
      } catch (e) { this.error = e.message; }
    },
    async removeTask(task) {                            // Delete
      try {
        await this.request(API + "/" + task.id, { method: "DELETE" });
        this.tasks = this.tasks.filter((t) => t.id !== task.id);
      } catch (e) { this.error = e.message; }
    },
  },
});

How the parts fit:

1. Read: created runs loadTasks, filling tasks.
2. Create: the form's @submit.prevent calls addTask; the body is JSON with a header; Flask answers 201 and the new task including its id; we push it (a reactive method).
3. Update: PUT sends only the changed field. We copy the server's answer back (task.done already exists, so this is reactive).
4. Delete: 204 has no body, so the helper returns null instead of calling res.json(); we remove it with filter.
5. Errors from any call end in this.error, which the template shows.

Idea 5: CORS: why the browser blocks and how to fix it

The browser has a safety rule, the same-origin policy: JavaScript from one origin may not read responses from another origin, unless that server says it is allowed. An origin is scheme + host + port; all three must match.

Your Vue dev page is at http://localhost:8080. Flask is at http://127.0.0.1:5000. Those are different origins (different host and port), so a fetch from the page to Flask is a cross-origin request, and without CORS headers the browser blocks the response and prints a CORS error in the console.

Origin comparison (a recurring exam question), page loaded from https://abc.com:

Enabling CORS in Flask

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)                                   # allow every origin (fine for local learning)
# or restrict:
# CORS(app, resources={r"/api/*": {"origins": "http://localhost:8080"}})

I tested the restricted version: a request with Origin: http://localhost:8080 gets Access-Control-Allow-Origin: http://localhost:8080; a request with Origin: http://localhost:5173 gets no such header (status 200, but the browser blocks it); a preflight OPTIONS gets the allowed methods and headers.

CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}})

@app.route("/api/data")
def data():
    return {"msg": "Success"}

fetch("http://localhost:5000/api/data").then(r => r.json()).then(console.log);

Other ways to avoid CORS

1. Dev proxy. The Vue dev server forwards some paths to Flask, so the page calls its own origin:

// vue.config.js (Vue CLI)
module.exports = {
  devServer: {
    proxy: { "/api": { target: "http://localhost:5000", changeOrigin: true } },
  },
};

Now the page at http://localhost:8080 calls fetch("/api/tasks") (a relative URL). The dev server passes it to Flask. The browser sees one origin, so no CORS. (With Vite the same idea is server.proxy in vite.config.js.) The proxy is for development only.

1. Serve both from one origin (next idea). In production the built Vue files and the API come from Flask, so there is no cross-origin call.

Idea 6: Putting a built Vue app inside Flask (outline)

npm run build (Vue CLI) produces a dist/ folder: index.html, plus js/ and css/ with minified files. These are plain static files. Flask can serve them:

from flask import Flask, send_from_directory

app = Flask(__name__, static_folder="dist", static_url_path="")

@app.get("/")
def index():
    return send_from_directory(app.static_folder, "index.html")

# the API lives under /api/..., so the same origin serves page and data

I checked that / returns the built index.html. Steps in practice:

1. In the Vue project run npm run build.
2. Copy or point to dist/ from your Flask folder (or set the build output there).
3. Use relative API URLs: fetch("/api/tasks") works in dev (through the proxy) and in production (same origin).
4. If you use the Vue Router in history mode, add a Flask catch-all that returns index.html for unknown non-API paths, otherwise a page refresh on /about gives Flask's 404 (week 6).

Idea 7: The response lifecycle and debugging

What happens when a user clicks "Load":

click (@click)  ->  method runs  ->  loading = true  ->  fetch() sends the request
      |                                                        |
Vue re-renders "Loading..."                            Flask route runs, returns JSON + status
      |                                                        |
   response arrives (browser checks CORS) ->  res.ok? -> res.json() -> this.tasks = data
      |
finally: loading = false  ->  Vue re-renders the list

Debugging with the browser Network tab (F12, then Network):

• Each request is a row: name, status, type, size, time. Red means failure.
• Click a row: Headers (request URL, method, status, request and response headers, including Access-Control-Allow-Origin), Payload (what you sent), Preview / Response (what came back), Timing.
• A CORS failure shows a message in the Console ("blocked by CORS policy"), and the row shows a CORS error or no response.
• Typical diagnosis: status 404 = wrong URL; 405 = wrong method; 400 = bad body or missing Content-Type; 415 = Flask did not get JSON; 500 = look at the Flask terminal; no row at all = the code never ran or Flask is not running.
• Add console.log(res.status) and console.log(data) while learning. Use the Vue Devtools extension to see data change.

Timing questions (very common in the papers)

@app.route("/endpoint1")
def method1():
    time.sleep(20)
    return "Endpoint 1 Accessed", 200, {"Access-Control-Allow-Origin": "*"}
@app.route("/endpoint2")
def method2():
    time.sleep(30)
    return "Endpoint 2 Accessed", 200, {"Access-Control-Allow-Origin": "*"}

app.run(threaded=False)

A page issues fetch to both URLs one after the other. The browser sends both at once, but a server started with threaded=False handles one request at a time, so total time until both are done is 20 + 30 = 50 seconds. With a threaded server (the default for flask run and app.run() in Flask 1.0 and later) they run in parallel and take about the larger one, 30 seconds. A variant: two routes sleeping 10 and 30 seconds with app.run(debug=True) (threaded), the page opened at 10:10:10, each route returning datetime.now().second. The logs show 20 (10 + 10) and 40 (10 + 30). The page itself loads at once in all cases (answer "0 seconds" for "when does the static page show"), because fetch does not block rendering.

Other ways to get fresh data

Match used in the papers: webhooks = notification when an event occurs; websockets = real-time chat; API = request/response over HTTP; polling = fetch periodically; pub/sub = broadcast to many subscribers.

Exam radar

Quick quiz

Viva: say it out loud

Recap

Practise with real exam questions

These come straight from past papers (with the real figures and the official answer key). Open 60 real questions on this week   All Quiz 2 papers