axios操作详解

待我称王封你为后i 2021-09-29 14:32 924阅读 0赞

# axios #

承诺基于HTTP客户端的浏览器和node.js

## 特征 ##

*  制作，使[XMLHttpRequest][]从浏览器
 *  制作，使[http][]来自node.js的请求
 *  支持[承诺][Link 1]API
 *  拦截请求和响应
 *  转换请求和响应数据
 *  取消请求
 *  JSON数据的自动转换
 *  客户端支持防止[XSRF][]

## 浏览器支持 ##

[![Browser Matrix][]][Browser Matrix 1]

## 安装 ##

利用npm安装：

$ npm install axios

使用bower：

$ bower install axios

使用yarn：

$ yarn add axios

使用CDN：

## 例 ##

表演`GET`请求

> **注：** `async/await`是ECMAScript 2017的一部分，在InternetExplorer和旧浏览器中不受支持，所以请谨慎使用。

表演`POST`请求

axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

执行多个并发请求

## Axios API ##

可以通过将相关配置传递给`axios`.

Axios(配置)

// Send a POST request
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });

// GET request for remote image
    axios({
      method: 'get',
      url: 'http://bit.ly/2mTM3nY',
      responseType: 'stream'
    })
      .then(function (response) {
        response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
      });

Axios(url\[，config\])

// Send a GET request (default method)
    axios('/user/12345');

### 请求方法别名 ###

为了方便起见，为所有支持的请求方法提供了别名。

> 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\]\])

注

使用别名方法时`url`, `method`，和`data`属性不需要在配置中指定。

### 并发性 ###

用于处理并发请求的助手函数。

AXOS.ALL(可迭代)

公理扩展(回调)

### 创建实例 ###

您可以使用自定义配置创建AXOS的新实例。

创建(\[config\])

const instance = axios.create({
      baseURL: 'https://some-domain.com/api/',
      timeout: 1000,
      headers: {'X-Custom-Header': 'foobar'}
    });

### 实例方法 ###

下面列出了可用的实例方法。指定的配置将与实例配置合并。

> 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\])

## 请求Config ##

这些是发出请求的可用配置选项。只有`url`是必需的。请求将默认为`GET`如果`method`未指定。

{
      // `url` is the server URL that will be used for the request
      url: '/user',
    
      // `method` is the request method to be used when making the request
      method: 'get', // default
    
      // `baseURL` will be prepended to `url` unless `url` is absolute.
      // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
      // to methods of that instance.
      baseURL: 'https://some-domain.com/api/',
    
      // `transformRequest` allows changes to the request data before it is sent to the server
      // This is only applicable for request methods 'PUT', 'POST', 'PATCH' and 'DELETE'
      // The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
      // FormData or Stream
      // You may modify the headers object.
      transformRequest: [function (data, headers) {
        // Do whatever you want to transform the data
    
        return data;
      }],
    
      // `transformResponse` allows changes to the response data to be made before
      // it is passed to then/catch
      transformResponse: [function (data) {
        // Do whatever you want to transform the data
    
        return data;
      }],
    
      // `headers` are custom headers to be sent
      headers: {'X-Requested-With': 'XMLHttpRequest'},
    
      // `params` are the URL parameters to be sent with the request
      // Must be a plain object or a URLSearchParams object
      params: {
        ID: 12345
      },
    
      // `paramsSerializer` is an optional function in charge of serializing `params`
      // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
      paramsSerializer: function (params) {
        return Qs.stringify(params, {arrayFormat: 'brackets'})
      },
    
      // `data` is the data to be sent as the request body
      // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
      // When no `transformRequest` is set, must be of one of the following types:
      // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
      // - Browser only: FormData, File, Blob
      // - Node only: Stream, Buffer
      data: {
        firstName: 'Fred'
      },
    
      // `timeout` specifies the number of milliseconds before the request times out.
      // If the request takes longer than `timeout`, the request will be aborted.
      timeout: 1000, // default is `0` (no timeout)
    
      // `withCredentials` indicates whether or not cross-site Access-Control requests
      // should be made using credentials
      withCredentials: false, // default
    
      // `adapter` allows custom handling of requests which makes testing easier.
      // Return a promise and supply a valid response (see lib/adapters/README.md).
      adapter: function (config) {
        /* ... */
      },
    
      // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
      // This will set an `Authorization` header, overwriting any existing
      // `Authorization` custom headers you have set using `headers`.
      // Please note that only HTTP Basic auth is configurable through this parameter.
      // For Bearer tokens and such, use `Authorization` custom headers instead.
      auth: {
        username: 'janedoe',
        password: 's00pers3cret'
      },
    
      // `responseType` indicates the type of data that the server will respond with
      // options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
      //   browser only: 'blob'
      responseType: 'json', // default
    
      // `responseEncoding` indicates encoding to use for decoding responses
      // Note: Ignored for `responseType` of 'stream' or client-side requests
      responseEncoding: 'utf8', // default
    
      // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
      xsrfCookieName: 'XSRF-TOKEN', // default
    
      // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
      xsrfHeaderName: 'X-XSRF-TOKEN', // default
    
      // `onUploadProgress` allows handling of progress events for uploads
      onUploadProgress: function (progressEvent) {
        // Do whatever you want with the native progress event
      },
    
      // `onDownloadProgress` allows handling of progress events for downloads
      onDownloadProgress: function (progressEvent) {
        // Do whatever you want with the native progress event
      },
    
      // `maxContentLength` defines the max size of the http response content in bytes allowed
      maxContentLength: 2000,
    
      // `validateStatus` defines whether to resolve or reject the promise for a given
      // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
      // or `undefined`), the promise will be resolved; otherwise, the promise will be
      // rejected.
      validateStatus: function (status) {
        return status >= 200 && status < 300; // default
      },
    
      // `maxRedirects` defines the maximum number of redirects to follow in node.js.
      // If set to 0, no redirects will be followed.
      maxRedirects: 5, // default
    
      // `socketPath` defines a UNIX Socket to be used in node.js.
      // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
      // Only either `socketPath` or `proxy` can be specified.
      // If both are specified, `socketPath` is used.
      socketPath: null, // default
    
      // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
      // and https requests, respectively, in node.js. This allows options to be added like
      // `keepAlive` that are not enabled by default.
      httpAgent: new http.Agent({ keepAlive: true }),
      httpsAgent: new https.Agent({ keepAlive: true }),
    
      // 'proxy' defines the hostname and port of the proxy server.
      // You can also define your proxy using the conventional `http_proxy` and
      // `https_proxy` environment variables. If you are using environment variables
      // for your proxy configuration, you can also define a `no_proxy` environment
      // variable as a comma-separated list of domains that should not be proxied.
      // Use `false` to disable proxies, ignoring environment variables.
      // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
      // supplies credentials.
      // This will set an `Proxy-Authorization` header, overwriting any existing
      // `Proxy-Authorization` custom headers you have set using `headers`.
      proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: {
          username: 'mikeymike',
          password: 'rapunz3l'
        }
      },
    
      // `cancelToken` specifies a cancel token that can be used to cancel the request
      // (see Cancellation section below for details)
      cancelToken: new CancelToken(function (cancel) {
      })
    }

## 响应模式 ##

请求的响应包含以下信息。

{
      // `data` is the response that was provided by the server
      data: {},
    
      // `status` is the HTTP status code from the server response
      status: 200,
    
      // `statusText` is the HTTP status message from the server response
      statusText: 'OK',
    
      // `headers` the headers that the server responded with
      // All header names are lower cased
      headers: {},
    
      // `config` is the config that was provided to `axios` for the request
      config: {},
    
      // `request` is the request that generated this response
      // It is the last ClientRequest instance in node.js (in redirects)
      // and an XMLHttpRequest instance the browser
      request: {}
    }

使用时`then`，您将收到如下答复：

axios.get('/user/12345')
      .then(function (response) {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
      });

使用时`catch`，或通过[拒绝回调][Link 2]作为第二参数`then`，响应将通过`error`对象，如[处理错误][Link 3]部分。

## 配置默认值 ##

您可以指定将应用于每个请求的配置默认值。

### 全局AXOS默认值 ###

axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

### 自定义实例默认值 ###

// Set config defaults when creating the instance
    const instance = axios.create({
      baseURL: 'https://api.example.com'
    });
    
    // Alter defaults after instance has been created
    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

### 配置优先顺序 ###

配置将以优先顺序合并。中发现的顺序是库默认值。[LIB/defaults.js][LIB_defaults.js]，然后`defaults`实例的`config`请求的论据。后者将优先于前者。下面是一个例子。

// Create an instance using the config defaults provided by the library
    // At this point the timeout config value is `0` as is the default for the library
    const instance = axios.create();
    
    // Override timeout default for the library
    // Now all requests using this instance will wait 2.5 seconds before timing out
    instance.defaults.timeout = 2500;
    
    // Override timeout for this request as it's known to take a long time
    instance.get('/longRequest', {
      timeout: 5000
    });

## 拦截器 ##

处理请求或响应之前，可以拦截它们。`then`或`catch`.

// Add a request interceptor
    axios.interceptors.request.use(function (config) {
        // Do something before request is sent
        return config;
      }, function (error) {
        // Do something with request error
        return Promise.reject(error);
      });
    
    // Add a response interceptor
    axios.interceptors.response.use(function (response) {
        // Do something with response data
        return response;
      }, function (error) {
        // Do something with response error
        return Promise.reject(error);
      });

如果您可能需要删除拦截器以后，您可以。

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
    axios.interceptors.request.eject(myInterceptor);

您可以将拦截器添加到AXOS的自定义实例中。

const instance = axios.create();
    instance.interceptors.request.use(function () {/*...*/});

## 处理错误 ##

axios.get('/user/12345')
      .catch(function (error) {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      });

属性定义自定义HTTP状态代码错误范围。`validateStatus`配置选项

axios.get('/user/12345', {
      validateStatus: function (status) {
        return status < 500; // Reject only if the status code is greater than or equal to 500
      }
    })

## 取消 ##

您可以使用*取消令牌*.

> AXIOS取消令牌API是基于撤回的[可撤销承诺提案][Link 4].

可以使用`CancelToken.source`工厂如下：

还可以通过将Executor函数传递给`CancelToken`构造者：

const CancelToken = axios.CancelToken;
    let cancel;
    
    axios.get('/user/12345', {
      cancelToken: new CancelToken(function executor(c) {
        // An executor function receives a cancel function as a parameter
        cancel = c;
      })
    });
    
    // cancel the request
    cancel();

> 注意：您可以使用相同的Cancel令牌取消几个请求。

## 使用应用程序/x-www格式-urlencode格式 ##

默认情况下，AXIOS将JavaScript对象序列化为`JSON`..若要将数据发送到`application/x-www-form-urlencoded`相反，您可以使用下列选项之一。

### 浏览器 ###

在浏览器中，可以使用[`URLSearchParams`][URLSearchParams]API如下：

const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/foo', params);

> 请注意`URLSearchParams`并非所有浏览器都支持(请参见[caniuse.com][])，但是有一个[聚填充][Link 5]可用(确保填充全球环境)。

或者，您可以使用[`qs`][qs]图书馆：

const qs = require('qs');
    axios.post('/foo', qs.stringify({ 'bar': 123 }));

或者以另一种方式(ES6)，

import qs from 'qs';
    const data = { 'bar': 123 };
    const options = {
      method: 'POST',
      headers: { 'content-type': 'application/x-www-form-urlencoded' },
      data: qs.stringify(data),
      url,
    };
    axios(options);

### Node.js ###

在node.js中，可以使用[`querystring`][querystring]模块如下：

const querystring = require('querystring');
    axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

这个`qs`如果需要对嵌套对象进行字符串化，`querystring`方法已经知道了该用例的问题([https://github.com/nodejs/node-v0.x-archive/issues/1665][https_github.com_nodejs_node-v0.x-archive_issues_1665]).

# #

## 承诺 ##

Axios依赖于本地ES6的 promise 实现支持..如果您的环境不支持ES6承诺，您可以 [polyfill][].

## TypeScript ##

Axios包括[TypeScript][] 定义。

import axios from 'axios';
    axios.get('/user?ID=12345');

# #

## 本文翻译自:[https://github.com/axios/axios][https_github.com_axios_axios] ##

[XMLHttpRequest]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
[http]: http://nodejs.org/api/http.html
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
[XSRF]: http://en.wikipedia.org/wiki/Cross-site_request_forgery
[Browser Matrix]: /images/20210923/2b12a6069f1d479b86481e3de3e9d733.png
[Browser Matrix 1]: https://saucelabs.com/u/axios
[Link 2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
[Link 3]: https://github.com/axios/axios#handling-errors
[LIB_defaults.js]: https://github.com/axios/axios/blob/master/lib/defaults.js#L28
[Link 4]: https://github.com/tc39/proposal-cancelable-promises
[URLSearchParams]: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
[caniuse.com]: http://www.caniuse.com/#feat=urlsearchparams
[Link 5]: https://github.com/WebReflection/url-search-params
[qs]: https://github.com/ljharb/qs
[querystring]: https://nodejs.org/api/querystring.html
[https_github.com_nodejs_node-v0.x-archive_issues_1665]: https://github.com/nodejs/node-v0.x-archive/issues/1665
[polyfill]: https://github.com/jakearchibald/es6-promise
[TypeScript]: http://typescriptlang.org/
[https_github.com_axios_axios]: https://github.com/axios/axios