Làm cách nào để gửi dữ liệu JSON trong Axios?

Bạn cũng có thể sử dụng xuất mặc định, vì xuất có tên chỉ là xuất lại từ nhà máy Axios

import axios from 'axios';

console.log[axios.isCancel['something']];

Nếu bạn sử dụng

const axios = require['axios'];

console.log[axios.isCancel['something']];

2 để nhập, thì chỉ có xuất mặc định

const axios = require['axios'];

console.log[axios.isCancel['something']];

Đối với trường hợp xảy ra sự cố khi cố gắng nhập mô-đun vào môi trường tùy chỉnh hoặc cũ, bạn có thể thử nhập trực tiếp gói mô-đun

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

CDN

Sử dụng jsDelivr CDN [mô-đun trình duyệt ES5 UMD]

Sử dụng giải nén CDN

Ví dụ

Lưu ý Sử dụng CommonJS Để có được các kiểu gõ TypeScript [cho intellisense / tự động hoàn thành] trong khi sử dụng nhập CommonJS với

const axios = require['axios'];

console.log[axios.isCancel['something']];

4, hãy sử dụng phương pháp sau.

$ bower install axios

0

Lưu ý

const axios = require['axios'];

console.log[axios.isCancel['something']];

5 là một phần của ECMAScript 2017 và không được hỗ trợ trong Internet Explorer và các trình duyệt cũ hơn, vì vậy hãy thận trọng khi sử dụng.

Thực hiện một yêu cầu

const axios = require['axios'];

console.log[axios.isCancel['something']];

6

$ bower install axios

1

Thực hiện nhiều yêu cầu đồng thời

$ bower install axios

2

axios API

Yêu cầu có thể được thực hiện bằng cách chuyển cấu hình có liên quan tới

const axios = require['axios'];

console.log[axios.isCancel['something']];

7

trục [cấu hình]

$ bower install axios

3

$ bower install axios

4

axios[url[, config]]

$ bower install axios

5

Bí danh phương thức yêu cầu

Để thuận tiện, bí danh đã được cung cấp cho tất cả các phương thức yêu cầu phổ biến

trục. yêu cầu [cấu hình]trục. nhận [url [, cấu hình]]trục. xóa [url [, cấu hình]]trục. đầu [url [, cấu hình]]trục. tùy chọn [url [, cấu hình]]trục. bài đăng [url [, dữ liệu [, cấu hình]]]trục. đặt [url [, dữ liệu [, cấu hình]]]trục. bản vá [url [, dữ liệu [, cấu hình]]]GHI CHÚ

Khi sử dụng các phương thức bí danh

const axios = require['axios'];

console.log[axios.isCancel['something']];

8,

const axios = require['axios'];

console.log[axios.isCancel['something']];

9 và

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

0, các thuộc tính không cần phải được chỉ định trong cấu hình

Đồng thời [Không dùng nữa]

Vui lòng sử dụng

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

1 để thay thế các chức năng bên dưới

Các hàm trợ giúp để xử lý các yêu cầu đồng thời

trục. tất cả các trục [có thể lặp lại]. lây lan [gọi lại]

Tạo một thể hiện

Bạn có thể tạo một phiên bản axios mới với cấu hình tùy chỉnh

trục. tạo [[cấu hình]]

$ bower install axios

6

Phương thức sơ thẩm

Các phương pháp thể hiện có sẵn được liệt kê dưới đây. Cấu hình đã chỉ định sẽ được hợp nhất với cấu hình cá thể

axios#request[config]axios#get[url[, config]]axios#delete[url[, config]]axios#head[url[, config]]axios#options[url[, config]]axios#post[url[, data[, config]]]axios#put[url[, data[, config]]]axios#patch[url[, data[, config]]]axios#getUri[[config]]

Yêu cầu cấu hình

Đây là các tùy chọn cấu hình có sẵn để thực hiện yêu cầu. Chỉ cần có

const axios = require['axios'];

console.log[axios.isCancel['something']];

8. Yêu cầu sẽ mặc định là

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

3 nếu

const axios = require['axios'];

console.log[axios.isCancel['something']];

9 không được chỉ định

$ bower install axios

7

Lược đồ phản hồi

Phản hồi cho một yêu cầu chứa thông tin sau

$ bower install axios

8

Khi sử dụng

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

5, bạn sẽ nhận được phản hồi như sau

$ bower install axios

9

Khi sử dụng

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

6 hoặc chuyển một lệnh gọi lại từ chối dưới dạng tham số thứ hai của

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

5, phản hồi sẽ có sẵn thông qua đối tượng

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

8 như được giải thích trong phần

Cấu hình mặc định

Bạn có thể chỉ định cấu hình mặc định sẽ được áp dụng cho mọi yêu cầu

Mặc định axios toàn cầu

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

10

Giá trị mặc định của phiên bản tùy chỉnh

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

11

Cấu hình thứ tự ưu tiên

Cấu hình sẽ được hợp nhất với thứ tự ưu tiên. Thứ tự là giá trị mặc định của thư viện được tìm thấy trong , sau đó là thuộc tính

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

9 của cá thể và cuối cùng là đối số

0 cho yêu cầu. Cái sau sẽ được ưu tiên hơn cái trước. Đây là một ví dụ

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

12

thiết bị đánh chặn

Bạn có thể chặn các yêu cầu hoặc phản hồi trước khi chúng được xử lý bởi

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

5 hoặc

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

6

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

13

Nếu bạn cần xóa thiết bị chặn sau này, bạn có thể

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

14

Bạn cũng có thể xóa tất cả các thiết bị chặn cho các yêu cầu hoặc phản hồi

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

15

Bạn có thể thêm thiết bị chặn vào phiên bản tùy chỉnh của axios

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

16

Khi bạn thêm bộ chặn yêu cầu, chúng được coi là không đồng bộ theo mặc định. Điều này có thể gây ra sự chậm trễ trong việc thực hiện yêu cầu axios của bạn khi luồng chính bị chặn [một lời hứa được tạo dưới mui xe cho trình chặn và yêu cầu của bạn được đặt ở cuối ngăn xếp cuộc gọi]. Nếu các trình chặn yêu cầu của bạn là đồng bộ, bạn có thể thêm một cờ vào đối tượng tùy chọn sẽ yêu cầu các axios chạy mã một cách đồng bộ và tránh bất kỳ sự chậm trễ nào trong quá trình thực thi yêu cầu

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

17

Nếu bạn muốn thực thi một trình chặn cụ thể dựa trên kiểm tra thời gian chạy, bạn có thể thêm hàm

3 vào đối tượng tùy chọn. Bộ chặn sẽ không được thực thi khi và chỉ khi trả về của

3 là

5. Hàm sẽ được gọi với đối tượng cấu hình [đừng quên rằng bạn cũng có thể liên kết các đối số của riêng mình với nó. ] Điều này có thể hữu ích khi bạn có trình chặn yêu cầu không đồng bộ chỉ cần chạy vào những thời điểm nhất định

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

18

Nhiều thiết bị đánh chặn

Với điều kiện bạn thêm nhiều bộ chặn phản hồi và khi phản hồi được thực hiện

• sau đó mỗi thiết bị chặn được thực thi
• sau đó chúng được thực hiện theo thứ tự chúng được thêm vào
• thì chỉ có kết quả của người đánh chặn cuối cùng được trả về
• sau đó mọi thiết bị chặn nhận được kết quả của thiết bị tiền nhiệm
• và khi thực hiện-đánh chặn ném
  • thì công cụ đánh chặn hoàn thành sau đây không được gọi
  • sau đó từ chối-đánh chặn sau đây được gọi là
  • sau khi bị bắt, một trình đánh chặn hoàn thành khác sẽ được gọi lại [giống như trong chuỗi lời hứa]

Đọc các bài kiểm tra đánh chặn để xem tất cả điều này trong mã

Xử lý lỗi

hành vi mặc định là từ chối mọi phản hồi trả về với mã trạng thái nằm ngoài phạm vi 2xx và coi đó là lỗi

const axios = require['axios/dist/browser/axios.cjs']; // browser commonJS bundle [ES2017]
// const axios = require['axios/dist/node/axios.cjs']; // node commonJS bundle [ES2017]

19

Sử dụng tùy chọn cấu hình

6, bạn có thể ghi đè điều kiện mặc định [trạng thái >= 200 && trạng thái < 300] và xác định [các] mã HTTP sẽ gây ra lỗi

90

Sử dụng

7, bạn nhận được một đối tượng có thêm thông tin về lỗi HTTP

91

hủy bỏ

hủy bỏ điều khiển

Bắt đầu từ

8 Axios hỗ trợ AbortController để hủy các yêu cầu theo cách tìm nạp API

92

HủyToken

9

Bạn cũng có thể hủy yêu cầu bằng CancelToken

API mã thông báo hủy axios dựa trên đề xuất lời hứa có thể hủy đã rút

API này không được dùng nữa kể từ v0. 22. 0 và không nên được sử dụng trong các dự án mới

Bạn có thể tạo mã thông báo hủy bằng cách sử dụng nhà máy

0 như hình bên dưới

93

Bạn cũng có thể tạo mã thông báo hủy bằng cách chuyển hàm thực thi tới hàm tạo

1

94

Ghi chú. bạn có thể hủy một số yêu cầu với cùng một mã thông báo hủy/bộ điều khiển hủy bỏ. Nếu mã thông báo hủy đã bị hủy tại thời điểm bắt đầu yêu cầu Axios, thì yêu cầu đó sẽ bị hủy ngay lập tức mà không có bất kỳ nỗ lực nào để thực hiện yêu cầu thực

Trong thời gian chuyển đổi, bạn có thể sử dụng cả hai API hủy, ngay cả đối với cùng một yêu cầu

Sử dụng định dạng

2

URLTìm kiếmThông số

Theo mặc định, axios tuần tự hóa các đối tượng JavaScript thành

3. Thay vào đó, để gửi dữ liệu ở định dạng

2, bạn có thể sử dụng API

5, có trong phần lớn các trình duyệt và bắt đầu với v10 [phát hành năm 2018]

95

Chuỗi truy vấn [Trình duyệt cũ hơn]

Để tương thích với các trình duyệt rất cũ, có sẵn một polyfill [đảm bảo polyfill môi trường toàn cầu]

Ngoài ra, bạn có thể mã hóa dữ liệu bằng thư viện

6

96

Hoặc theo cách khác [ES6],

97

Nút cũ hơn. phiên bản js

Đối với nút cũ hơn. js, bạn có thể sử dụng mô-đun

7 như sau

98

Bạn cũng có thể sử dụng thư viện

6

Lưu ý Thư viện

6 thích hợp hơn nếu bạn cần xâu chuỗi các đối tượng lồng nhau, vì phương thức

7 đã biết các vấn đề với trường hợp sử dụng đó.

🆕Tự động tuần tự hóa thành URLSearchParams

Axios sẽ tự động tuần tự hóa đối tượng dữ liệu thành định dạng được mã hóa url nếu tiêu đề kiểu nội dung được đặt thành "application/x-www-form-urlencoding"

99

Máy chủ sẽ xử lý nó như

$ bower install axios

30

Nếu trình phân tích cú pháp nội dung phụ trợ của bạn [như

$ bower install axios

01 của

$ bower install axios

02] hỗ trợ giải mã các đối tượng lồng nhau, bạn sẽ tự động nhận được cùng một đối tượng ở phía máy chủ

$ bower install axios

31

Sử dụng định dạng

import axios from 'axios';

console.log[axios.isCancel['something']];

9

Biểu mẫuDữ liệu

Để gửi dữ liệu dưới dạng

$ bower install axios

04, bạn cần chuyển một đối tượng formData dưới dạng tải trọng. Không cần đặt tiêu đề

$ bower install axios

05 vì Axios đoán nó dựa trên loại tải trọng

$ bower install axios

32

trong nút. js, bạn có thể sử dụng thư viện

$ bower install axios

06 như sau

$ bower install axios

33

🆕Tự động tuần tự hóa FormData

Bắt đầu từ

$ bower install axios

07, Axios hỗ trợ tuần tự hóa đối tượng tự động thành đối tượng FormData nếu tiêu đề yêu cầu

$ bower install axios

05 được đặt thành

import axios from 'axios';

console.log[axios.isCancel['something']];

9

Yêu cầu sau sẽ gửi dữ liệu ở định dạng FormData [Trình duyệt & Nút. js]

$ bower install axios

34

Trong bản dựng

$ bower install axios

10, polyfill [

$ bower install axios

06] được sử dụng theo mặc định

Bạn có thể quá tải lớp FormData bằng cách đặt biến cấu hình

$ bower install axios

12, nhưng có thể bạn sẽ không cần nó trong hầu hết các trường hợp

$ bower install axios

35

Trình nối tiếp Axios FormData hỗ trợ một số phần cuối đặc biệt để thực hiện các thao tác sau

• $ bower install axios

  13 - tuần tự hóa giá trị bằng JSON. xâu chuỗi lại

• $ bower install axios

  14 - mở gói đối tượng dạng mảng dưới dạng các trường riêng biệt có cùng khóa

Lưu ý thao tác mở khóa/mở rộng sẽ được sử dụng theo mặc định trên các mảng và đối tượng FileList

Trình nối tiếp FormData hỗ trợ các tùy chọn bổ sung thông qua thuộc tính

$ bower install axios

15 để xử lý các trường hợp hiếm gặp

• $ bower install axios

  16 - chức năng khách truy cập do người dùng xác định sẽ được gọi đệ quy để tuần tự hóa đối tượng dữ liệu thành đối tượng

  $ bower install axios

  17 bằng cách tuân theo các quy tắc tùy chỉnh

• $ bower install axios

  18 - sử dụng ký hiệu dấu chấm thay vì dấu ngoặc để sắp xếp thứ tự các mảng và đối tượng;

• $ bower install axios

  19 - thêm phần kết thúc đặc biệt [e. g

  $ bower install axios

  20] trong khóa FormData. Trình phân tích cú pháp nội dung phía sau có khả năng sử dụng thông tin meta này để tự động phân tích cú pháp giá trị dưới dạng JSON

• $ bower install axios

  21 - kiểm soát cách các chỉ mục sẽ được thêm vào các khóa chưa được mở của các đối tượng giống như mảng của

  $ bower install axios

  22

  • $ bower install axios

    23 - không thêm dấu ngoặc [______724,

    $ bower install axios

    25,

    $ bower install axios

    26]

  • 5[mặc định] - thêm dấu ngoặc trống [

    $ bower install axios

    28,

    $ bower install axios

    29,

    $ bower install axios

    30]
  • ________ 731 - thêm dấu ngoặc với các chỉ số [________ 732, _______ 733,

    $ bower install axios

    34]

Giả sử chúng ta có một đối tượng như thế này

$ bower install axios

36

Các bước sau đây sẽ được thực thi bởi bộ nối tiếp Axios trong nội bộ

$ bower install axios

37

Axios hỗ trợ các phương pháp phím tắt sau.

$ bower install axios

35,

$ bower install axios

36,

$ bower install axios

37 chỉ là các phương thức http tương ứng với tiêu đề

$ bower install axios

05 được đặt trước cho

import axios from 'axios';

console.log[axios.isCancel['something']];

9

Tập tin đăng

Bạn có thể dễ dàng gửi một tệp

$ bower install axios

38

hoặc nhiều tệp dưới dạng

import axios from 'axios';

console.log[axios.isCancel['something']];

9

$ bower install axios

39

đối tượng

$ bower install axios

41 có thể được truyền trực tiếp

import axios from 'axios';

console.log[axios.isCancel['something']];

0

Tất cả các tệp sẽ được gửi với cùng tên trường.

$ bower install axios

42

🆕Đăng biểu mẫu HTML [trình duyệt]

Chuyển phần tử Biểu mẫu HTML dưới dạng tải trọng để gửi nó dưới dạng nội dung

import axios from 'axios';

console.log[axios.isCancel['something']];

9

import axios from 'axios';

console.log[axios.isCancel['something']];

1

Các đối tượng

$ bower install axios

17 và

$ bower install axios

45 cũng có thể được đăng dưới dạng

3 bằng cách đặt rõ ràng tiêu đề

$ bower install axios

05 thành

$ bower install axios

48

import axios from 'axios';

console.log[axios.isCancel['something']];

2

Ví dụ, Biểu mẫu

import axios from 'axios';

console.log[axios.isCancel['something']];

3

sẽ được gửi dưới dạng đối tượng JSON sau

import axios from 'axios';

console.log[axios.isCancel['something']];

4

Gửi

$ bower install axios

49/

$ bower install axios

50 dưới dạng JSON [

$ bower install axios

51] hiện không được hỗ trợ

🆕Nắm bắt tiến trình

Axios hỗ trợ cả môi trường trình duyệt và nút để nắm bắt tiến trình tải lên/tải xuống của yêu cầu

import axios from 'axios';

console.log[axios.isCancel['something']];

5

Bạn cũng có thể theo dõi tiến trình tải lên/tải xuống luồng trong nút. js

import axios from 'axios';

console.log[axios.isCancel['something']];

6

Ghi chú. Nắm bắt tiến trình tải lên FormData hiện không được hỗ trợ trong nút. môi trường js

⚠️Cảnh báo Bạn nên tắt chuyển hướng bằng cách đặt maxRedirects. 0 để tải lên luồng trong nút. js, vì gói theo dõi chuyển hướng sẽ đệm toàn bộ luồng trong RAM mà không tuân theo thuật toán "áp suất ngược"

🆕Giới hạn tỷ lệ

Chỉ có thể đặt giới hạn tốc độ tải xuống và tải lên cho bộ điều hợp http [nút. js]

import axios from 'axios';

console.log[axios.isCancel['something']];

7

học kỳ

Cho đến khi axios đạt đến bản phát hành

$ bower install axios

52, các thay đổi vi phạm sẽ được phát hành cùng với một phiên bản nhỏ mới. Ví dụ:

$ bower install axios

53 và

$ bower install axios

54 sẽ có cùng một API, nhưng

$ bower install axios

55 sẽ có những thay đổi đột phá

lời hứa

axios phụ thuộc vào việc triển khai ES6 Promise gốc sẽ được hỗ trợ. Nếu môi trường của bạn không hỗ trợ Lời hứa ES6, bạn có thể điền vào

bản đánh máy

axios bao gồm các định nghĩa TypeScript và bộ bảo vệ kiểu cho các lỗi axios

import axios from 'axios';

console.log[axios.isCancel['something']];

8

Vì axios dual xuất bản với xuất mặc định ESM và CJS

$ bower install axios

56 nên có một số cảnh báo. Cài đặt được đề xuất là sử dụng

$ bower install axios

57 [điều này được ngụ ý bởi

$ bower install axios

58]. Lưu ý rằng điều này yêu cầu TypeScript 4. 7 hoặc cao hơn. Nếu sử dụng ESM, cài đặt của bạn sẽ ổn. Nếu bạn biên dịch TypeScript sang CJS và bạn không thể sử dụng

$ bower install axios

59, bạn phải bật

$ bower install axios

60. Nếu bạn sử dụng TypeScript để nhập mã JavaScript kiểm tra CJS, tùy chọn duy nhất của bạn là sử dụng

$ bower install axios

57

Thiết lập trực tuyến bằng một cú nhấp chuột

Bạn có thể sử dụng Gitpod, một IDE trực tuyến [miễn phí cho Mã nguồn mở] để đóng góp hoặc chạy các ví dụ trực tuyến

Tài nguyên

• Nhật ký thay đổi
• hệ sinh thái
• hướng dẫn đóng góp
• quy tắc ứng xử

Tín dụng

axios lấy cảm hứng rất nhiều từ dịch vụ $http được cung cấp trong AngularJS. Cuối cùng thì axios là một nỗ lực để cung cấp một dịch vụ giống như

$ bower install axios

62 độc lập để sử dụng bên ngoài AngularJS

Gửi dữ liệu JSON trong Axios phản ứng như thế nào?

Làm cách nào để gửi tệp và dữ liệu JSON trong Axios?

Làm cách nào để sử dụng JSON trong Axios?

Làm cách nào để đăng dữ liệu trong máy chủ JSON bằng Axios?