HTTP Requests

By Syncfusion®, Inc. · Last updated November 14, 2026

HTTP, REST and JSON in plain words, fetch() for GET, POST, PUT, PATCH and DELETE with headers, bodies and query strings, response.ok and status codes, loading, success, empty and error states, refetching, stale responses and AbortController, Axios instances, interceptors and cancellation, a full CRUD screen, API service modules and env-based URLs.

Talking to a Server

• Real apps keep their data on a server: menus, orders, users.
• The browser asks the server for data, and sends new data to it, over HTTP.
• Request = a message from the browser: "give me the dishes".
• Response = the server's answer: a status code and some data.
• JSON = the text format most servers use for data. It looks like JavaScript objects.

Simple lesson: the app sends HTTP requests, and the server answers with JSON.

A Real-World Example

• Meera's menu now lives on a server.
• The page must show "Loading…" first, then the dishes.
• If the server fails, it must show a friendly message, not a blank page.

• What happened: "Loading the menu…" showed first.
• About 300 ms later the dishes arrived, and the list replaced it.
• The Console below the preview shows the request: [API] GET /dishes → 200.

What You Will Learn

1. What HTTP methods, REST and status codes mean.
2. How to send GET, POST, PUT, PATCH and DELETE with fetch().
3. How to add headers, a body and a query string.
4. Why you must check response.ok.
5. How to show loading, success, empty and error states.
6. How to load again and cancel old requests.
7. How to use Axios, its instances and interceptors.
8. How to build a full create, read, update and delete screen.
9. How to keep API calls in one module and the address in .env.

HTTP and REST in Plain Words

• REST = a common way to design a server's addresses around things, such as dishes.
• The method says what to do with the thing.

Status Codes

• 2xx = success. 200 OK, 201 Created, 204 No content.
• 4xx = the request was wrong. 400 Bad request, 401 Not logged in, 403 Not allowed, 404 Not found.
• 5xx = the server failed. 500 Server error.

Simple lesson: the method says what to do. The status code says how it went.

fetch() for Every Method

• fetch(url) sends a GET and returns a Promise of the response.
• await res.json() reads the JSON body.
• For other methods, pass options: method, headers and body.
• Send JSON with JSON.stringify(data) and the header Content-Type: application/json.
• Build a query string with URLSearchParams: ?veg=true.

Checking response.ok

• fetch only fails for network problems, such as no internet.
• A 404 or 500 is still a "successful" fetch. It does not throw.
• So always check res.ok (true for 2xx) or res.status.
• Throw your own error when it is not ok.

Simple lesson: fetch does not throw on 404 or 500. Check res.ok yourself.

Four States of a Request

• Loading: the request is on its way. Show a spinner or "Loading…".
• Success: data arrived. Show it.
• Empty: it worked, but there is nothing. Say so clearly.
• Error: it failed. Explain it kindly and offer "Try again".
• The first box on this page shows all four.

Refetching and Stale Responses

• Data often loads again: a new filter, a new page, a "Refresh" button.
• If the user clicks fast, an old slow request can finish after a newer one.
• The page then shows old data. This is a stale response.
• Fix: cancel the old request with an AbortController before starting a new one.
• Also cancel in onUnmounted, as you did in Lifecycle and Template Refs.

• What happened: click "Veg (slow)", then quickly "All (fast)".
• The slow veg request was cancelled, so it could not overwrite the newer list.

Simple lesson: cancel old requests with AbortController, so new data always wins.

Axios

• Axios = a popular library for HTTP requests. Install it with npm install axios.
• It reads JSON for you: res.data.
• It throws on 4xx and 5xx, so you do not forget the check.
• axios.create({ baseURL, headers, timeout }) makes an instance with shared settings.
• Interceptors run on every request or response: add a token, log, handle errors in one place.
• Cancel with the same AbortController: { signal: controller.signal }.

CORS and the Dev Proxy

• CORS = a browser rule. A page from one address may only read answers from another address if that server allows it.
• If it does not, the request fails with a "blocked by CORS policy" error in the browser Console. This is the server's setting, not a bug in your Vue code.
• Fix on the server: it must send Access-Control-Allow-Origin for your site.
• During development, Vite can forward requests for you, so the browser sees one address:

// vite.config.ts
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: { "/api": "http://localhost:8080" }, // fetch("/api/dishes") → http://localhost:8080/api/dishes
  },
});

• The proxy works only in npm run dev. In production, the server or the host must allow it.

A Full CRUD Screen

• CRUD = Create, Read, Update, Delete. Most admin screens do all four.
• Keep the HTTP calls in a service module, such as services/dishes.ts.
• Components then call dishService.list(), not raw URLs.
• Keep the server address in .env as VITE_API_URL, read with import.meta.env. You will learn more in Errors, Security and Deployment.

Simple lesson: keep HTTP calls in a service module, and the server address in .env.

TL;DR

• HTTP = requests and responses between the app and a server.
• REST methods = GET read, POST create, PUT replace, PATCH change, DELETE remove.
• Status codes = 2xx success, 4xx bad request, 5xx server failure.
• fetch(url, { method, headers, body }) = sends a request. await res.json() reads JSON.
• res.ok = true for 2xx. fetch does not throw on 404 or 500.
• Four states = loading, success, empty, error.
• AbortController = cancels a request. Stops stale responses.
• Axios = res.data, throws on errors, instances and interceptors.
• Service module + .env = one place for API calls and the server address.

Common mistakes

Check Yourself

Exercises

What to Remember

• GET reads, POST creates, PUT replaces, PATCH changes, DELETE removes.
• fetch does not throw on 404 or 500. Always check res.ok.
• Show loading, success, empty and error states.
• Cancel old requests with AbortController to avoid stale data.
• Keep API calls in a service module, and the server address in .env.

Next: Authentication and Real-Time Data