Hướng dẫn dùng axios.put JavaScript

Nhiều dự án trên web cần giao diện với REST API ở một số giai đoạn trong quá trình phát triển của chúng. Axios là một ứng dụng khách HTTP nhẹ dựa trên service $http trong Angular.js v1.x và tương tự như API Fetch trong JavaScript gốc.

Axios dựa trên promise, mang lại cho bạn khả năng tận dụng lợi thế của JavaScript async và await để có mã không đồng bộ dễ đọc hơn.

Bạn cũng có thể chặn và hủy yêu cầu, đồng thời tích hợp sẵn tính năng bảo vệ phía máy khách để chống lại việc giả mạo yêu cầu trên nhiều trang web.

Trong bài viết này, bạn sẽ thấy các ví dụ về cách sử dụng Axios để truy cập API Trình giữ chỗ JSON phổ biến trong ứng dụng React.

Bước 1 - Thêm Axios vào Dự án

Trong phần này, bạn sẽ thêm Axios vào dự án v1study-tutorial mà bạn đã tạo sau hướng dẫn Cách thiết lập một dự án React với Create React App.

Để thêm Axios vào dự án, hãy mở terminal ra và thay đổi các thư mục vào dự án của bạn, sau đó chạy lệnh sau để cài đặt Axios:

Tiếp theo, bạn sẽ cần import Axios vào file mà bạn muốn sử dụng.

Bước 2 - Tạo request 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

0

Trong ví dụ này, bạn tạo một component mới và import Axios vào đó để gửi requets 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

0.

Bên trong thư mục 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

2 bạn hãy tạo một component mới có tên 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

3, sau đó thêm vào mã sau:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount[] {
    axios.get[`//jsonplaceholder.typicode.com/users`]
      .then[res => {
        const persons = res.data;
        this.setState[{ persons }];
      }]
  }

  render[] {
    return [
      
        { this.state.persons.map[person => {person.name}]}
      
    ]
  }
}

Trong đoạn code trên, đầu tiên bạn import và React và Axios để chúng đều có thể được sử dụng trong component. Sau đó, bạn móc vào hook vòng đời 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

4 và thực hiện một request 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

0.

Bạn sử dụng 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

6 với một URL từ một enpoint API để nhận được một promise trả về một đối tượng phản hồi. Bên trong đối tượng phản hồi, có dữ liệu sau đó được gán giá trị 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

7.

Bạn cũng có thể nhận được thông tin khác về yêu cầu, chẳng hạn như mã trạng thái 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

8 hoặc nhiều thông tin bên trong 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

9.

Bước 3 - Tạo request 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

0

Trong bước này, bạn sẽ sử dụng Axios với một phương thức yêu cầu HTTP khác được gọi là 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

0.

Xóa đoạn code trước đó trong 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

2 và thêm mã sau để tạo biểu mẫu cho phép người dùng nhập và sau đó 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

0đưa nội dung vào API:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState[{ name: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    const user = {
      name: this.state.name
    };

    axios.post[`//jsonplaceholder.typicode.com/users`, { user }]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person Name:
            
          
          Add
        
      
    ]
  }
}

Bên trong hàm 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

4, bạn ngăn chặn hành động mặc định của form. Sau đó cập nhật 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

5 vào input 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

6.

Việc sử dụng 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

0 sẽ cung cấp cho bạn cùng một đối tượng phản hồi với thông tin mà bạn có thể sử dụng bên trong lời gọi 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

8.

Để hoàn thành request 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

0, trước tiên bạn phải lấy được thông tin của input 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

6. Sau đó, bạn thêm input cùng với request 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

0, điều này sẽ cung cấp cho bạn phản hồi. Sau đó, bạn có thể 

import axios from 'axios';

export default axios.create[{
  baseURL: `//jsonplaceholder.typicode.com/`
}];

2 phản hồi, phản hồi sẽ hiển thị nội dung đã điền vào input 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

6.

Bước 4 - Tạo request 

import axios from 'axios';

export default axios.create[{
  baseURL: `//jsonplaceholder.typicode.com/`
}];

4

Trong ví dụ này, bạn sẽ thấy cách xóa các mục khỏi API bằng cách sử dụng 

import axios from 'axios';

export default axios.create[{
  baseURL: `//jsonplaceholder.typicode.com/`
}];

5 và truyền một URL làm tham số.

Thay đổi mã cho biểu mẫu từ ví 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

0 để xóa người dùng thay vì thêm người mới:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

Một lần nữa, đối tượng 

import axios from 'axios';

export default axios.create[{
  baseURL: `//jsonplaceholder.typicode.com/`
}];

7 cung cấp cho bạn thông tin về yêu cầu. Sau đó bạn có thể 

import axios from 'axios';

export default axios.create[{
  baseURL: `//jsonplaceholder.typicode.com/`
}];

2 lại thông tin đó một lần nữa sau khi form được gửi.

Bước 5 - Sử dụng phiên bản cơ sở trong Axios

Trong ví dụ này, bạn sẽ thấy cách bạn có thể thiết lập một phiên bản cơ sở, trong đó bạn có thể định nghĩa URL và bất kỳ phần tử cấu hình nào khác.

Tạo một file riêng biệt có tên 

import axios from 'axios';

export default axios.create[{
  baseURL: `//jsonplaceholder.typicode.com/`
}];

9, sau đó export một phiên bản mới 

import React from 'react';
import axios from 'axios';
import API from './api';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    API.delete[`users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

0 với các giá trị mặc định sau:

import axios from 'axios';

export default axios.create[{
  baseURL: `//jsonplaceholder.typicode.com/`
}];

Khi phiên bản mặc định được thiết lập, nó có thể được sử dụng bên trong component 

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    axios.delete[`//jsonplaceholder.typicode.com/users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

2. Bạn import phiên bản mới như thế này:

import React from 'react';
import axios from 'axios';
import API from './api';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    API.delete[`users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

Vì 

import React from 'react';
import axios from 'axios';
import API from './api';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    API.delete[`users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

2 bây giờ là URL cơ sở, bạn không cần phải nhập toàn bộ URL mỗi khi bạn muốn truy cập một endpoint khác trên API.

Bước 6 - Sử dụng async và await

Trong ví dụ này, bạn sẽ thấy cách bạn có thể sử dụng async và await làm việc với các promise.

Từ khóa await giải quyết các 

import React from 'react';
import axios from 'axios';
import API from './api';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    API.delete[`users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

8 và trả về 

import React from 'react';
import axios from 'axios';
import API from './api';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    API.delete[`users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

9. Sau đó 

import React from 'react';
import axios from 'axios';
import API from './api';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    API.delete[`users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

9 có thể được gán cho một biến.

import React from 'react';
import axios from 'axios';
import API from './api';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = async event => {
    event.preventDefault[];

    const res = await PI.delete[`users/${this.state.id}`]
    console.log[res];
    console.log[res.data];
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

Trong đoạn code trên ta đã bỏ đi 

import React from 'react';
import axios from 'axios';
import API from './api';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = async event => {
    event.preventDefault[];

    const res = await PI.delete[`users/${this.state.id}`]
    console.log[res];
    console.log[res.data];
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

1. Giá trị 

import React from 'react';
import axios from 'axios';
import API from './api';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState[{ id: event.target.value }];
  }

  handleSubmit = event => {
    event.preventDefault[];

    API.delete[`users/${this.state.id}`]
      .then[res => {
        console.log[res];
        console.log[res.data];
      }]
  }

  render[] {
    return [
      
        
          
            Person ID:
            
          
          Delete
        
      
    ]
  }
}

8 được giải quyết và giá trị được lưu trữ bên trong biến 

import axios from 'axios';

export default axios.create[{
  baseURL: `//jsonplaceholder.typicode.com/`
}];

7.

Phần kết luận

Trong bài hướng dẫn này, bạn đã khám phá một số ví dụ về cách sử dụng Axios bên trong ứng dụng React để tạo các yêu cầu HTTP và xử lý các phản hồi.