EthioCode SoftSelect · P3·L01

01Axios ምንድን ነው?

Axios — በ Promise ላይ የተመሰረተ (Promise-based) የ HTTP client library ነው! በ Browser ውስጥም ሆነ በ Node.js ውስጥ ይሰራል! fetch()ን ይበልጥ ቀላል፣ ኃይለኛ እና ለ Production ዝግጁ በሆነ መልኩ ተክቶታል!
Axios is a popular HTTP client with auto JSON parsing, interceptors, and smart error handling — used by millions of production apps.

📦

npm install axios / yarn add axios
import axios from 'axios' — ፈጣን አጠቃቀም (setup)!
Works everywhere JavaScript runs — React, Vue, Angular, Node.js

⚖️ Axios vs fetch() — ትልቁ ልዩነቱ

ነጥብ	Axios	fetch()
JSON auto-parse	✅ ራሱ ያደርገዋል (Auto-parse)	❌ .json() መጠቀም ያስፈልጋል
4xx/5xx errors	✅ እንደ error ይቆጥራል (throw ያደርጋል)	❌ እንደ error አይቆጠርም
Interceptors	✅ አብሮት ይገኛል (Built-in)	❌ የለውም
Request cancel	✅ በጣም ቀላል ነው	❌ ረጅም ኮድ ይፈልጋል
Upload progress	✅ Built-in አለው	❌ Manual (በራስ መስራት ያሻል)
Timeout	✅ በአንድ option ብቻ ያልቃል	❌ AbortControllerን ይፈልጋል

02HTTP Methods — GET · POST · PUT · DELETE

Method ምረጡ → ኮዱ ሲቀያየር ተመልከቱ!

get.js

import axios from 'axios';

// ── ቀላሉ GET Request ───────────
const res = await axios.get('https://api.example.com/users');
console.log(res.data);  // ✅ JSON ራሱ parse ሆኗል!

// ── የ Query ማቀናበሪያ (params) ─
const res2 = await axios.get('/posts', {
  params: { userId: 1, _limit: 5 }
  // URL ላይ: /posts?userId=1&_limit=5 — Axios ራሱ ያዘጋጀዋል!
});

post.js

// ── አዲስ data ለመፍጠር (Create) ───
const res = await axios.post('/api/posts', {
  title:  'Axios ትምህርት 🔥',
  body:   'EthioCode SoftSelect!',
  userId: 1
});
console.log(res.data); // { id:101, title:'...', ... }

// ── ከ Auth header ጋር ስንልክ ───
await axios.post('/api/data', data, {
  headers: { 'Authorization': `Bearer ${token}` }
});

put-patch.js

// PUT — ሁሉንም ነገር (ሙሉ ዝማኔ) ያደርጋል ──
await axios.put(`/api/posts/${id}`, {
  title:  'አዲስ ርዕስ',
  body:   'አዲስ ዝርዝር',
  userId: 1   // ሁሉም field ያስፈልጋል
});

// PATCH — አንድ field (ከፊል) ብቻ ለመቀየር ──
await axios.patch(`/api/posts/${id}`, {
  title: 'ርዕሱ ብቻ'  // ያልተፃፈው body ሳይቀየር ይቀራል!
});

delete.js

// ── መረጃን ለማጥፋት (ሰርዝ) ────────
await axios.delete(`/api/posts/${id}`);
// Server መልሱ status 200 ወይም 204 ይሆናል — ✅ በሚገባ ተሰርዟል!

// ── Summary (ማጠቃለያ) ──────────
// axios.get    → Fetch data (መረጃ ለማምጣት)
// axios.post   → Create (አዲስ ለመፍጠር)
// axios.put    → Full update (ሙሉውን ለመቀየር)
// axios.patch  → Partial update (አንዱን ብቻ ለመቀየር)
// axios.delete → Remove (ለመሰረዝ/ለማጥፋት)

03Axios Instance — Base Config ያዘጋጁ

Instance (ኢንስታንስ) — baseURL + headers + timeout አንዴ ፃፉ! ከዚያ በኋላ የሚላኩት ሁሉም requests ቀጥታ ይጠቀምባቸዋል!
Create once, use everywhere — no repeated config per request.

createaxios.create()

→

configbaseURL + timeout

→

intercepttoken + logging

→

useapi.get() / post()

api/client.js

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.ethiojobs.com',
  timeout: 10000,        // 10 ሴኮንድ ካለፈ → Error (ያቋርጣል)
  headers: { 'Content-Type': 'application/json' }
});

// ── Token interceptor (ከ request በፊት ሚሰራ) ───
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// ── አጠቃቀም (የተቀመጠው baseURL ይቀጠላል) ─────
const jobs = await api.get('/api/jobs');    // → አድራሻው ይሆናል .../api/jobs
const me   = await api.get('/api/profile'); // → አድራሻው ይሆናል .../api/profile

04Error Handling — ስህተቶችን መቆጣጠር

4xx

Client Error

404 Not Found · 401 Unauthorized · 403 Forbidden
error.response.status

5xx

Server Error

500 Internal Error · 503 Unavailable
error.response.data

Net

Network Error

Internet መጥፋት (Disconnect) · Timeout · CORS
error.request

error-handling.js

try {
  const res = await axios.get('/api/user/999');
} catch (error) {

  if (error.response) {
    // ── Server response መጥቷል፣ ነገር ግን error አለው (4xx/5xx)
    console.log(error.response.status);  // ምሳሌ፡ 404
    console.log(error.response.data);    // Server የላከው Error msg (ለምሳሌ { message: '...' })

    if (error.response.status === 401) {
      window.location.href = '/login'; // Login ካላደረገ ወደ login ገፅ ለመውሰድ
    }

  } else if (error.request) {
    // ── Request ሄደ፣ ነገር ግን Server response አልመለሰም
    console.log('Network error! እባክዎ ኢንተርኔትዎን ይፈትሹ።');

  } else {
    console.log('Error:', error.message);
  }
}

05🎮 Live Playground — ኮዱን አሁኑኑ ይሞክሩ!

Axios Playground — Real HTTP Request

READY ✅

🌐 Request Tester

✏️ Code Runner

⚖️ Axios vs fetch

እውነተኛ HTTP requests ► (jsonplaceholder.typicode.com) API ተጠቅመን እንሞክራለን!
No backend needed — try GET, POST, PUT, DELETE live!

— ——

Request (Run) አድርገው ሲያበቁ — የሰርቨሩ Response እዚህ ይታያል...

Axios code ፃፉ → ▶ Run አድርጉ! የ console.log() output ከስር ይታያል!
Full axios API simulated — get, post, put, patch, delete all work!

// Output (የኮዱ ውጤት) እዚህ ጋር ይታያል...

አንድ ጥያቄ — በሁለት መንገድ። ልዩነቱን ተመልከቱ!

❌ fetch() — ረጅም ኮድ ይፈልጋል

fetch('/api/user')
  .then(res => {
    // ✋ Response ok መሆኑን ሁሌ ማጣራት አለብን!
    if(!res.ok) throw Error(res.status);
    return res.json(); // ዳታውን ወደ JSON ይቀይረዋል
  })
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

✅ Axios — ንጹህ እና አጭር ኮድ!

try {
  const { data } =
    await axios.get('/api/user');
  // ✅ JSON ራሱ parse ያደርጋል! Error ሲመጣ ራሱ ያስተናግዳል!

  console.log(data);

} catch(err) {
  console.error(err.message);
}

💡 ዋናው ልዩነት: በ Axios ጊዜ ዳታን ለማምጣት .json() ማለትም ሆነ، ወይም error ለመያዝ !res.ok እያሉ ቼክ (check) ማድረግ አያስፈልግም — සියሉንም Auto ራሱ ያከናውነዋል!

06📌 ዋና ዋና ነጥቦች (Takeaways)

1

✅ JSON Auto-Parse መሆኑ

res.data ከተባለ ቀጥታ ይሰራል — .json() ፈፅሞ አያስፈልግም! response.data is already parsed JSON, always.

2

✅ የተሻለ Error Handling አለው

4xx/5xx የሚመጡ ስህተቶችን → Axios ራሱ throw ያደርገዋል! ለመቆጣጠር error.response.statusን መጠቀም ብቻ ነው። fetch() returns ok even for 404 — Axios doesn't.

3

✅ Axios Instance ያስገኛል

በ axios.create() — baseURL፣ timeout፣ እና headers አንድ ጊዜ ብቻ አዘጋጁ (config ያድርጉ)! ከዛ በቀላሉ ዳግም መጠቀም ነው። One configured instance shared across your entire app.

4

✅ Interceptors አገልግሎት አለው

ማንኛውንም Request ከመላኩ እና ከተላከ በኋላ ለመቆጣጠር ያስችላል — Token, logging, እና redirect ማድረግ። ለአንዴና ለመጨረሻ ጊዜ ፃፉት! Middleware for HTTP — runs before every request/response.

5

✅ ለ Production ብቁ እና ዝግጁ (Production Ready) ነው

Timeout (ጊዜ ገደብ) ማስተካከል · Upload progress · እና Request ን አቋርጥ (Cancel tokens) ማለት ይቻላል — እነዚህ ሁሉ ለይተው ከሚያሳዩት (built-in features) ውስጥ ናቸው። Everything a real production app needs, out of the box.

07🎯 የዕውቀት መፈተኛ (Quiz)

❓ የ Axios ላይብረሪ ከ fetch() በምን የተሻለ ያደርገዋል / ዋና ልዩነቱ ምንድን ነው?

What is the most important advantage of Axios over fetch()?

Aበተለይ የተሻሻለ የ fetch() version ሆኖ መምጣቱ ነው — It's an improved version of fetch()

Bበ Node.js ውስጥ ብቻ ነው የሚሰራው (ይገኛል) — Works only in Node.js

Cራሱ JSONን parse የሚያደርገው እና ማንኛውንም (4xx/5xx errors) በ automatic መንገድ throw አድርጎ መግለፁ ነው። ✅

Dእንቅስቃሴው ከ fetch() ይልቅ በጣም ፍጥን (Faster) ስለሆነ ነው — It's significantly faster

Axios — HTTPን የምንጠቀምበት ቀላሉ መንገድ! 🌐

Axios —
HTTPን የምንጠቀምበት ቀላሉ መንገድ! 🌐