axios入门

axios入门

axios是什么？

axios是前端最常用的Ajax请求库
官方文档：https://github.com/axios/axios
axios的特点

基于xhr+promise的异步ajax请求库
欣赏器端/node端都能使用
支持请求/相应拦截
支持请求取消
请求/相应数据转换，能主动转为JSON
批量发送多个请求
常用语法

axios(config):通用/最本质的发送恣意请求的方式

1. axios({
2.         //常用的配置项
3.         method:'',                //GET  POST   PUT 更新   DELETE 删除
4.         url:'',   //不同的method需要到的目录下不一样,可以参考官方文档
5.         //响应体
6.         data:{},
7.         //响应头
8.         headers:{}
9. })

复制代码

Request Config

These are the available config options for making requests. Only the url is required. Requests will default to GET if method is not specified.

1. {
2.   // `url` is the server URL that will be used for the request
3.   url: '/user',
5.   // `method` is the request method to be used when making the request
6.   method: 'get', // default
8.   // `baseURL` will be prepended to `url` unless `url` is absolute.
9.   // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
10.   // to methods of that instance.
11.   baseURL: 'https://some-domain.com/api/',
13.   // `transformRequest` allows changes to the request data before it is sent to the server
14.   // This is only applicable for request methods 'PUT', 'POST', 'PATCH' and 'DELETE'
15.   // The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
16.   // FormData or Stream
17.   // You may modify the headers object.
18.   transformRequest: [function (data, headers) {
19.     // Do whatever you want to transform the data
21.     return data;
22.   }],
24.   // `transformResponse` allows changes to the response data to be made before
25.   // it is passed to then/catch
26.   transformResponse: [function (data) {
27.     // Do whatever you want to transform the data
29.     return data;
30.   }],
32.   // `headers` are custom headers to be sent
33.   headers: {'X-Requested-With': 'XMLHttpRequest'},
35.   // `params` are the URL parameters to be sent with the request
36.   // Must be a plain object or a URLSearchParams object
37.   params: {
38.     ID: 12345
39.   },
40.   
41.   // `paramsSerializer` is an optional config that allows you to customize serializing `params`.
42.   paramsSerializer: {
44.     //Custom encoder function which sends key/value pairs in an iterative fashion.
45.     encode?: (param: string): string => { /* Do custom operations here and return transformed string */ },
46.    
47.     // Custom serializer function for the entire parameter. Allows user to mimic pre 1.x behaviour.
48.     serialize?: (params: Record<string, any>, options?: ParamsSerializerOptions ),
49.    
50.     //Configuration for formatting array indexes in the params.
51.     indexes: false // Three available options: (1) indexes: null (leads to no brackets), (2) (default) indexes: false (leads to empty brackets), (3) indexes: true (leads to brackets with indexes).   
52.   },
54.   // `data` is the data to be sent as the request body
55.   // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
56.   // When no `transformRequest` is set, must be of one of the following types:
57.   // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
58.   // - Browser only: FormData, File, Blob
59.   // - Node only: Stream, Buffer, FormData (form-data package)
60.   data: {
61.     firstName: 'Fred'
62.   },
64.   // syntax alternative to send data into the body
65.   // method post
66.   // only the value is sent, not the key
67.   data: 'Country=Brasil&City=Belo Horizonte',
69.   // `timeout` specifies the number of milliseconds before the request times out.
70.   // If the request takes longer than `timeout`, the request will be aborted.
71.   timeout: 1000, // default is `0` (no timeout)
73.   // `withCredentials` indicates whether or not cross-site Access-Control requests
74.   // should be made using credentials
75.   withCredentials: false, // default
77.   // `adapter` allows custom handling of requests which makes testing easier.
78.   // Return a promise and supply a valid response (see lib/adapters/README.md)
79.   adapter: function (config) {
80.     /* ... */
81.   },
82.   // Also, you can set the name of the built-in adapter, or provide an array with their names
83.   // to choose the first available in the environment
84.   adapter: 'xhr' // 'fetch' | 'http' | ['xhr', 'http', 'fetch']
86.   // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
87.   // This will set an `Authorization` header, overwriting any existing
88.   // `Authorization` custom headers you have set using `headers`.
89.   // Please note that only HTTP Basic auth is configurable through this parameter.
90.   // For Bearer tokens and such, use `Authorization` custom headers instead.
91.   auth: {
92.     username: 'janedoe',
93.     password: 's00pers3cret'
94.   },
96.   // `responseType` indicates the type of data that the server will respond with
97.   // options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
98.   //   browser only: 'blob'
99.   responseType: 'json', // default
101.   // `responseEncoding` indicates encoding to use for decoding responses (Node.js only)
102.   // Note: Ignored for `responseType` of 'stream' or client-side requests
103.   // options are: 'ascii', 'ASCII', 'ansi', 'ANSI', 'binary', 'BINARY', 'base64', 'BASE64', 'base64url',
104.   // 'BASE64URL', 'hex', 'HEX', 'latin1', 'LATIN1', 'ucs-2', 'UCS-2', 'ucs2', 'UCS2', 'utf-8', 'UTF-8',
105.   // 'utf8', 'UTF8', 'utf16le', 'UTF16LE'
106.   responseEncoding: 'utf8', // default
108.   // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
109.   xsrfCookieName: 'XSRF-TOKEN', // default
111.   // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
112.   xsrfHeaderName: 'X-XSRF-TOKEN', // default
113.    
114.   // `undefined` (default) - set XSRF header only for the same origin requests
115.   withXSRFToken: boolean | undefined | ((config: InternalAxiosRequestConfig) => boolean | undefined),
117.   // `onUploadProgress` allows handling of progress events for uploads
118.   // browser & node.js
119.   onUploadProgress: function ({loaded, total, progress, bytes, estimated, rate, upload = true}) {
120.     // Do whatever you want with the Axios progress event
121.   },
123.   // `onDownloadProgress` allows handling of progress events for downloads
124.   // browser & node.js
125.   onDownloadProgress: function ({loaded, total, progress, bytes, estimated, rate, download = true}) {
126.     // Do whatever you want with the Axios progress event
127.   },
129.   // `maxContentLength` defines the max size of the http response content in bytes allowed in node.js
130.   maxContentLength: 2000,
132.   // `maxBodyLength` (Node only option) defines the max size of the http request content in bytes allowed
133.   maxBodyLength: 2000,
135.   // `validateStatus` defines whether to resolve or reject the promise for a given
136.   // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
137.   // or `undefined`), the promise will be resolved; otherwise, the promise will be
138.   // rejected.
139.   validateStatus: function (status) {
140.     return status >= 200 && status < 300; // default
141.   },
143.   // `maxRedirects` defines the maximum number of redirects to follow in node.js.
144.   // If set to 0, no redirects will be followed.
145.   maxRedirects: 21, // default
147.   // `beforeRedirect` defines a function that will be called before redirect.
148.   // Use this to adjust the request options upon redirecting,
149.   // to inspect the latest response headers,
150.   // or to cancel the request by throwing an error
151.   // If maxRedirects is set to 0, `beforeRedirect` is not used.
152.   beforeRedirect: (options, { headers }) => {
153.     if (options.hostname === "example.com") {
154.       options.auth = "user:password";
155.     }
156.   },
158.   // `socketPath` defines a UNIX Socket to be used in node.js.
159.   // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
160.   // Only either `socketPath` or `proxy` can be specified.
161.   // If both are specified, `socketPath` is used.
162.   socketPath: null, // default
163.   
164.   // `transport` determines the transport method that will be used to make the request. If defined, it will be used. Otherwise, if `maxRedirects` is 0, the default `http` or `https` library will be used, depending on the protocol specified in `protocol`. Otherwise, the `httpFollow` or `httpsFollow` library will be used, again depending on the protocol, which can handle redirects.
165.   transport: undefined, // default
167.   // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
168.   // and https requests, respectively, in node.js. This allows options to be added like
169.   // `keepAlive` that are not enabled by default.
170.   httpAgent: new http.Agent({ keepAlive: true }),
171.   httpsAgent: new https.Agent({ keepAlive: true }),
173.   // `proxy` defines the hostname, port, and protocol of the proxy server.
174.   // You can also define your proxy using the conventional `http_proxy` and
175.   // `https_proxy` environment variables. If you are using environment variables
176.   // for your proxy configuration, you can also define a `no_proxy` environment
177.   // variable as a comma-separated list of domains that should not be proxied.
178.   // Use `false` to disable proxies, ignoring environment variables.
179.   // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
180.   // supplies credentials.
181.   // This will set an `Proxy-Authorization` header, overwriting any existing
182.   // `Proxy-Authorization` custom headers you have set using `headers`.
183.   // If the proxy server uses HTTPS, then you must set the protocol to `https`.
184.   proxy: {
185.     protocol: 'https',
186.     host: '127.0.0.1',
187.     // hostname: '127.0.0.1' // Takes precedence over 'host' if both are defined
188.     port: 9000,
189.     auth: {
190.       username: 'mikeymike',
191.       password: 'rapunz3l'
192.     }
193.   },
195.   // `cancelToken` specifies a cancel token that can be used to cancel the request
196.   // (see Cancellation section below for details)
197.   cancelToken: new CancelToken(function (cancel) {
198.   }),
200.   // an alternative way to cancel Axios requests using AbortController
201.   signal: new AbortController().signal,
203.   // `decompress` indicates whether or not the response body should be decompressed
204.   // automatically. If set to `true` will also remove the 'content-encoding' header
205.   // from the responses objects of all decompressed responses
206.   // - Node only (XHR cannot turn off decompression)
207.   decompress: true, // default
209.   // `insecureHTTPParser` boolean.
210.   // Indicates where to use an insecure HTTP parser that accepts invalid HTTP headers.
211.   // This may allow interoperability with non-conformant HTTP implementations.
212.   // Using the insecure parser should be avoided.
213.   // see options https://nodejs.org/dist/latest-v12.x/docs/api/http.html#http_http_request_url_options_callback
214.   // see also https://nodejs.org/en/blog/vulnerability/february-2020-security-releases/#strict-http-header-parsing-none
215.   insecureHTTPParser: undefined, // default
217.   // transitional options for backward compatibility that may be removed in the newer versions
218.   transitional: {
219.     // silent JSON parsing mode
220.     // `true`  - ignore JSON parsing errors and set response.data to null if parsing failed (old behaviour)
221.     // `false` - throw SyntaxError if JSON parsing failed (Note: responseType must be set to 'json')
222.     silentJSONParsing: true, // default value for the current Axios version
224.     // try to parse the response string as JSON even if `responseType` is not 'json'
225.     forcedJSONParsing: true,
227.     // throw ETIMEDOUT error instead of generic ECONNABORTED on request timeouts
228.     clarifyTimeoutError: false,
229.   },
231.   env: {
232.     // The FormData class to be used to automatically serialize the payload into a FormData object
233.     FormData: window?.FormData || global?.FormData
234.   },
236.   formSerializer: {
237.       visitor: (value, key, path, helpers) => {}; // custom visitor function to serialize form values
238.       dots: boolean; // use dots instead of brackets format
239.       metaTokens: boolean; // keep special endings like {} in parameter key
240.       indexes: boolean; // array indexes format null - no brackets, false - empty brackets, true - brackets with indexes
241.   },
243.   // http adapter only (node.js)
244.   maxRate: [
245.     100 * 1024, // 100KB/s upload limit,
246.     100 * 1024  // 100KB/s download limit
247.   ]
248. }

复制代码

其他Request method aliases

axios(url[,config]):可只指定url发送get请求
axios.requst(config) :等同于axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
设置默认值

全局axios默认值

1. axios.defaults.configOption = '';
2. //axios.defaults.baseURL = 'http://localhost/3000';

复制代码

自定义实例默认值

1. // 创建实例对象时设置默认值
2. const instance = axios.create({
3.   baseURL: 'https://api.example.com'
4. });
6. // 创建完毕时也能更改默认值
7. instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

复制代码

自定义实例对象发请求

基本语法

1. //const instanceName = axios.create([config])
2. //创建实例对象，instance对象和axios对象几近一样
3. const instance = axios.create({
4.         baseURL = 'http://localhost/3000',
5.         timeout = 3000,
6.         headers:{'X-Custom-Header': 'foobar'}
7. })
8. //使用实例对象发请求，基本上instance对象能使用axios的所有API
9. instance({
10.         method:'get',
11.         url:'/index',
12.         data:{}
13. })

复制代码

拦截器

请求拦截器和相应拦截器
You can intercept requests or responses before they are handled by or .then catch

1. //设置请求拦截器
2. axios.interceptors.request.use(function (config) {
3.     // Do something before request is sent
4.     return config;
5.   }, function (error) {
6.     // Do something with request error
7.     return Promise.reject(error);
8.   });
10. // 设置响应拦截器
11. axios.interceptors.response.use(function (response) {
12.     // Any status code that lie within the range of 2xx cause this function to trigger
13.     // Do something with response data
14.     return response;
15.   }, function (error) {
16.     // Any status codes that falls outside the range of 2xx cause this function to trigger
17.     // Do something with response error
18.     return Promise.reject(error);
19.   });
20. //设置完之后再正常使用axios对象或者instance对象
21. //若同一对象身上有多个请求拦截器，调用的顺序和代码顺序是相反的，也即后进先执行
22. //若同一对象身上有多个响应拦截器，调用的顺序和代码顺序是相同的。

复制代码

axios取消请求

1. //结构化的配置
2. let cancel;
4. axios.get('/user/12345', {
5.   cancelToken: new axios.CancelToken(function executor(c) {
6.     // An executor function receives a cancel function as a parameter
7.     cancel = c;
8.   })
9. });
11. // 调用函数关闭请求
12. cancel();

复制代码

从 Axios v0.22.0开始，支持 AbortController 以 fetch API 的方式取消请求

1. const controller = new AbortController();
3. axios.get('/foo/bar', {
4.    signal: controller.signal
5. }).then(function(response) {
6.    //...
7. });
8. // cancel the request
9. controller.abort()

复制代码

本次分享先到这里，具体的一些理论，请看我下篇的axios源码分析…

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。