GALAXY TECH
Chuyên gia Công nghệ
Thứ sáu, 05/04/2019 | 00:00 GMT+7

Cách sử dụng Axios với JavaScript

Axios là một thư viện open-souce cho phép ta dễ dàng thực hiện các yêu cầu HTTP. Nó hiệu quả chỉ cần fetch với các siêu năng lực bổ sung!

Hãy xem điều này hoạt động bằng cách tạo một dự án HTML5 mới:

# Create directory with a name of your choosing
$ mkdir axios-js && cd axios-js

# Create files
$ touch index.html app.js

# Initialise a new npm project
$ npm init -y

# Install Axios
$ npm i axios -S

$ npm i parcel-bundler -D

# Open this up in your editor
$ code .

LƯU Ý: Axios cũng có thể được thêm qua CDN như vậy: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Như bạn thấy từ các cuộc gọi npm install của ta , ta sẽ sử dụng Parcel để đóng gói và phân phát mã của ta . Ta có thể thêm một tập lệnh npm cho điều này bằng cách chuyển đến package.json :

{
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
}

Vì ta sẽ sử dụng async và await bên trong dự án của bạn , ta sẽ cài đặt Babel và @babel/polyfill :

$ npm i @babel/core @babel/polyfill

Bắt đầu dự án của bạn bằng cách chạy npm run dev trong terminal của bạn và chuyển đến http://localhost:1234/ . Sau đó, ta có thể cập nhật index.html bằng app.js của ta và một số ngữ nghĩa nhỏ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vanilla Axios</title>

  <style>
    body {
      background-color: #673AB7;
      color: white;
    }
    ul {
      list-style: none;
    }
  </style>
</head>
<body>

  <div>
    <h1>Todos</h1>
    <ul>

    </ul>
  </div>
  <script src="app.js"></script>

</body>
</html>

ĐƯỢC

Bên trong app.js , hãy tạo một hàm cho phép ta GET app.js từ một API. Ta sẽ sử dụng API Trình giữ chỗ JSON cho ví dụ của ta .

import axios from 'axios';

const BASE_URL = 'https://jsonplaceholder.typicode.com';

const getTodos = async () => {
  try {
    const res = await axios.get(`${BASE_URL}/todos`);

    const todos = res.data;

    console.log(`GET: Here's the list of todos`, todos);

    return todos;
  } catch (e) {
    console.error(e);
  }
};

Axios hầu như làm cho việc lấy dữ liệu từ server trở nên quá đơn giản , đó là một tin tuyệt vời đối với ta . Chỉ cần chuyển axios.get BASE_URL và bạn sẽ nhận lại được một đối tượng response .

Điều này bao gồm thông tin về phản hồi của ta bao gồm những thứ như headers , status , config và quan trọng nhất là data .

Ta có thể mở rộng ứng dụng của bạn để thêm dữ liệu này vào DOM:

const createLi = item => {
  const li = document.createElement('li');

  li.appendChild(document.createTextNode(item.title));

  return li;
};

const addTodosToDOM = todos => {
  const ul = document.querySelector('ul');

  if (Array.isArray(todos) && todos.length > 0) {
    todos.map(todo => {
      ul.appendChild(createLi(todo));
    });
  } else if (todos) {
    ul.appendChild(createLi(todos));
  }
};

const main = async () => {
  addTodosToDOM(await getTodos());
};

main();

BÀI ĐĂNG

Ta có thể thêm Công việc vào API của bạn bằng cách nắm bắt một số thông tin về nó bên trong form và input :

<div id="new-todos">
  <h1>New Todo</h1>
  <form>
    <label>
      Name
      <input type="text" id="new-todos__name" />
    </label>
    <label>
      userId
      <input type="text"  id="new-todos__userId" />
    </label>
    <button type="submit">Add</button>
  </form>
</div>

Sau đó, ta có thể thêm Todo bằng cách lắng nghe sự kiện submit :

const form = document.querySelector('form');

const formEvent = form.addEventListener('submit', async event => {
  event.preventDefault();

  const title = document.querySelector('#new-todos__title').value;
  const userId = document.querySelector('#new-todos__userId').value;

  const todo = {
    title,
    userId
  };

  const addedTodo = await addTodo(todo);
  addTodosToDOM(addedTodo);
});

Ta cần tạo hàm addTodo bên trong app.js Sự khác biệt chính giữa ví dụ này và ví dụ get là ta đang thêm tải trọng todo .

export const addTodo = async todo => {
  try {
    const res = await axios.post(`${BASE_URL}/todos`, todo);
    const addedTodo = res.data;

    console.log(`Added a new Todo!`, addedTodo);

    return addedTodo;
  } catch (e) {
    console.error(e);
  }
};

XÓA BỎ

Danh sách Todo có ích gì nếu ta không thể xóa các mục? Hãy thêm chức năng đó. Ta có thể tạo một hàm deleteTodo bên trong app.js :

export const deleteTodo = async id => {
  try {
    const res = await axios.delete(`${BASE_URL}/todos/${id}`);
    console.log(`Deleted Todo ID: `, id);

    return res.data;
  } catch (e) {
    console.error(e);
  }
};

Trong hàm createLi ta , ta có thể đính kèm một sự kiện onclick xử lý việc xóa Todo của ta khi nó được nhấp vào. Phương thức DELETE yêu cầu một id phải được truyền dưới dạng tham số, vì vậy ta cũng có thể thêm một id vào mỗi phần tử ở giai đoạn này.

const createLi = item => {
  const li = document.createElement('li');

  li.id = item.id;
  li.appendChild(document.createTextNode(item.title));

  // Remove LI on click
  li.onclick = async e => await removeTodo(e, li);

  return li;
};

Bên trong removeLi ta có thể xóa Todo khỏi DOM và sau đó gọi deleteTodo với ID:

const removeTodo = async (e, li) => {
  e.target.parentElement.removeChild(li);
  const id = li.id;

  await deleteTodo(id);
};

Tóm lược

Bài viết này xem xét một số cách chính để tương tác với API bằng Axios bằng ứng dụng Todo rất đơn giản . Nếu bạn muốn tìm hiểu thêm về Axios, hãy xem hướng dẫn về React + Axios và Vue + Axios .

Tags:

Các tin liên quan

Giới thiệu về Lặp lại và Trình lặp trong JavaScript
2019-03-13
D3.js: Hiểu các lựa chọn và so sánh với Vanilla JavaScript
2019-03-04
Xem xét Phạm vi, Ngữ cảnh, Tham chiếu Đối tượng và Thuyết minh trong JavaScript
2019-02-25
Sử dụng JavaScript Mixins
2019-02-12
Đọc mã nguồn JavaScript, sử dụng AST
2019-02-09
JavaScript Biểu thức chính quy cho Người bình thường
2019-02-07
Mẫu kế thừa nguyên mẫu JavaScript
2019-02-01
Các mẫu hướng đối tượng JavaScript: Mẫu nhà máy
2019-01-23
Đối tượng, Nguyên mẫu và Lớp trong JavaScript
2019-01-10
Thủ thuật với JavaScript Hủy cấu trúc
2018-11-26