Chúng tôi có thể gửi đối tượng JSON trong yêu cầu đăng bài không?

Một trong những khái niệm khiến tôi khó hiểu là sự khác biệt giữa các phương thức HTTP của POST, PUT và PATCH. Chúng có chức năng tương tự ở chỗ chúng được sử dụng để tạo tài nguyên mới hoặc chỉnh sửa tài nguyên hiện có. Nhưng khi được hỏi (và tôi đã từng tham gia các cuộc phỏng vấn) sự khác biệt cụ thể giữa chúng là gì, tôi thường thấy mình vấp váp. Đây là một bài viết ngắn sẽ cố gắng giải thích dễ dàng những khác biệt đó

Đầu tiên, các phương thức HTTP là gì? . Chúng tuân thủ một bộ nguyên tắc đã được thống nhất khi truy xuất hoặc thay đổi dữ liệu

Các động từ HTTP phổ biến nhất là GET và POST. GET được sử dụng khi truy xuất tài nguyên hiện có và POST được sử dụng khi tạo tài nguyên mới. Khi bạn điền vào biểu mẫu trực tuyến và nhấp vào 'Gửi', thông thường, điều này sẽ kích hoạt yêu cầu POST ở mặt sau để tạo tài nguyên mới trong cơ sở dữ liệu

Những lần khác, bạn có thể chỉ cần thay đổi thông tin trong một tài nguyên hiện có. Đây là nơi PUT và PATCH xuất hiện. Yêu cầu PUT chứa phiên bản mới của tài nguyên hiện có chứa cả dữ liệu mới và không thay đổi. Yêu cầu PATCH cũng sửa đổi tài nguyên hiện có nhưng nó chỉ chứa dữ liệu cần thay đổi

Đó là những khác biệt cơ bản, vì vậy hãy xem ba điều này hoạt động như thế nào

Đối với ví dụ đơn giản này, tôi đang sử dụng gói NPM ‘json-server’ để bắt chước một máy chủ phụ trợ và sau đó kiểm tra các tuyến đường với Postman

Thiết lập máy chủ json

Đầu tiên tôi sẽ thêm gói 'json-server' (Gần đây tôi đã sử dụng Sợi nhưng tất cả những thứ này cũng có thể được thực hiện với NPM)

yarn add json-server

Tài liệu 'json-server' nói rằng hãy tạo một 'db. json’ để lưu trữ dữ liệu, đó là bước tiếp theo

touch db.json

Sau đó, bạn khởi động máy chủ bằng lệnh sau

json-server --watch db.json

Tất nhiên, nếu bạn đặt tên cho. json tệp nào khác, bạn sẽ đặt tên đó trong lệnh. Ngoài ra, nếu bạn (như tôi) không cài đặt gói 'json-server' trên toàn cầu, bạn có thể chạy lệnh này với 'gói. tập lệnh json

//package.json
...
"scripts": {
  "server": "json-server --watch db.json"
}
...

Sau đó, máy chủ sẽ chạy với lệnh sau

yarn run server

Tại thời điểm này, máy chủ sẽ chạy và theo mặc định, nó chạy trên cổng 3000. Vì vậy, nếu bạn duyệt đến http. //máy chủ cục bộ. 3000, bạn sẽ thấy thông báo chúc mừng từ json-server

Lưu ý rằng không tìm thấy tài nguyên nào vì 'db của chúng tôi. tệp json' trống. Chúng ta nên thay đổi điều đó

Tôi sẽ tạo một đối tượng JSON với khóa là 'liên hệ' và giá trị là một mảng thông tin liên hệ. Vì vậy, db. tệp json bây giờ trông như thế này

//db.json
{
  "contacts": [
    {
      "id": 1,
      "firstName": "Jason",
      "lastName": "Arnold",
      "location": "NYC",
      "email": "[email protected]"
    }
  ]
}

Khi điều này được thực hiện và bạn làm mới trang, bây giờ bạn sẽ thấy các tài nguyên được liệt kê và nếu bạn nhấp vào liên kết tài nguyên, bạn sẽ thấy đối tượng JSON được hiển thị trong trình duyệt của mình

Lưu ý rằng tôi cũng đang sử dụng tiện ích mở rộng 'JSONView' của Chrome nên dữ liệu của bạn có thể trông hơi khác một chút

Thử nghiệm với Postman

Bây giờ chúng ta có thể chuyển sang sử dụng route với Postman. Tại thời điểm này, tôi cho rằng bạn đã có một số kiến ​​thức cơ bản về Postman. Nếu bạn không, đừng lo lắng, nó khá dễ sử dụng. Tôi đã viết bài báo trên Phương tiện này về cách thiết lập và chạy thử nghiệm cơ bản

Trước tiên, tôi muốn đảm bảo rằng Người đưa thư cũng có thể xem dữ liệu của chúng tôi, vì vậy với máy chủ vẫn đang chạy, tôi gửi yêu cầu GET tới http. //máy chủ cục bộ. 3000/liên hệ và xem dữ liệu được trả về

POST yêu cầu

Mọi thứ ở đây đều ổn, vì vậy hãy thử yêu cầu POST. Với POST, yêu cầu chúng tôi cần cung cấp tất cả dữ liệu chúng tôi muốn đưa vào tài nguyên của mình. Trong trường hợp này, đó sẽ là id, họ và tên, vị trí và email. Trong Postman, thay đổi phương thức bên cạnh URL thành 'POST' và trong tab 'Nội dung', chọn nút radio 'thô' và sau đó chọn 'JSON (application/json)' từ trình đơn thả xuống. Bây giờ bạn có thể nhập JSON mà bạn muốn gửi cùng với yêu cầu POST

Nếu điều này thành công, bạn sẽ thấy dữ liệu mới trong 'db của mình. tập tin json

yêu cầu PUT

Chúng tôi đã thêm thành công tài nguyên mới bằng POST. Nhưng nếu chúng ta muốn chỉnh sửa một trong số này thì sao? . Như tôi đã nói trước đây, PUT cần chứa một phiên bản mới của tài nguyên với dữ liệu được cập nhật. Điều này bao gồm tất cả dữ liệu không thay đổi

Vì vậy, nếu bạn muốn thay đổi email của một trong các địa chỉ liên hệ, bạn sẽ gửi cùng với địa chỉ email đã cập nhật cũng như tên và vị trí. Lưu ý rằng URL hiện cần tham chiếu 'id' của tài nguyên mà chúng tôi đang sửa đổi

Một đối tượng tài nguyên mới bao gồm thông tin mới hiện được gửi đến máy chủ và 'db. json’ phản ánh thông tin mới

Nếu bạn muốn thay đổi tài nguyên bằng id 2, bạn sẽ thực hiện các bước tương tự nhưng chỉ cần thêm 2 (hoặc bất kỳ id nào khác) vào cuối URL thay vì 1

Nhưng nếu bạn quên rằng PUT cần tất cả thông tin hiện có và bạn chỉ gửi thông tin mới thì sao?

Ở đây, URL của tôi giống như trước đây. Tôi đang gửi yêu cầu POST tới http. //máy chủ cục bộ. 3000/contacts/1 nhưng thông tin tôi đưa vào chỉ là một địa chỉ email mới

Và đây là trạng thái của db của chúng tôi. tập tin json

Ối. Không chính xác những gì chúng tôi muốn. Điều này chỉ dẫn đến điểm rằng thông tin bạn gửi cùng với PUT, và không có gì khác, sẽ trở thành tài nguyên mới

Gửi tất cả thông tin khi cập nhật không phải là vấn đề lớn đối với các đối tượng nhỏ chỉ có một vài thông tin. Nhưng nếu chúng ta đang xử lý các đối tượng lớn với hàng trăm mẩu thông tin thì sao? . Nếu bạn chỉ sửa đổi một thứ trong tài nguyên và bạn muốn phần còn lại của nó không bị ảnh hưởng, bạn có thể sử dụng PATCH

yêu cầu VÁ

Tôi đã khôi phục đối tượng đầu tiên từ trước và bây giờ tôi muốn thay đổi vị trí của đối tượng đầu tiên, nhưng tôi chỉ muốn gửi thông tin mới, vì vậy tôi sẽ sử dụng PATCH thay vì PUT

Và đối tượng trong db của chúng tôi. tệp json đã được cập nhật

PATCH chỉ cập nhật những thứ bạn đưa vào và nó để nguyên mọi thứ khác trong tài nguyên

Phần kết luận

POST, PUT và PATCH có phần giống nhau về chức năng nhưng mỗi cái cần được sử dụng đúng lúc và đúng cách

POST — tạo tài nguyên mới

PUT - cập nhật tài nguyên với thông tin mới và hiện có

PATCH - sửa đổi tài nguyên hiện có chỉ bằng thông tin mới

Tôi hy vọng điều này đã làm sáng tỏ sự khác biệt giữa ba phương pháp này. Dưới đây là một vài liên kết khác mà tôi đã sử dụng để viết bài đăng này mà bạn có thể thấy hữu ích

Chúng tôi có thể gửi đối tượng JSON trong yêu cầu POST trong API REST không?

Làm cách nào để chuyển dữ liệu JSON trong yêu cầu POST?

Làm cách nào để gửi một đối tượng JSON trong yêu cầu POST Người đưa thư?

Làm cách nào để chuyển đối tượng JSON trong JavaScript yêu cầu POST?