Axios配置基本URL - Javascript

Axios是一个现代的HTTP客户端库，它可运行于浏览器和Node.js平台，可以进行表单提交、文件上传等操作，让我们能够轻松地和后台进行交互。在使用Axios时，我们通常需要为每个请求设置一些默认参数，如请求头、超时时间等等。其中一个常见的需求是要为所有请求指定一个基本URL，这样我们就可以在所有请求中引用同一个域名或者端口。

在下面的介绍中，我们将会告诉你如何配置Axios的基本URL，并且提供一些实用的代码片段供你参考。

配置基本URL

为了方便起见，我们将Axios的实例化代码封装在一个函数中，这样我们就可以在需要的时候任意调用它。在这个函数中，我们将通过调用Axios.create方法创建一个新的Axios实例，并在该实例中设置一个baseURL属性，它将作为所有请求的默认地址。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com/',
});

在上述代码片段中，我们在实例化时传入了一个包含baseURL的配置对象。在这个基本URL下，我们将会发出所有请求，因此每个请求的URL都会自动在其前面添加这个基本URL。

其他的常用配置项

在上面的代码片段中，我们只是设置了Axios实例的baseURL属性。如果你需要更改其他的默认配置，可以像下面这样在实例化时添加其他的配置项（例如responseType、timeout等）。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 10000,
  responseType: 'json',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  xsrfCookieName: 'XSRF-TOKEN', //CSRF令牌的cookie名称
  xsrfHeaderName: 'X-XSRF-TOKEN', //CSRF令牌的请求头名称
});

在上述代码片段中，我们设置了timeout、responseType和headers配置项。timeout表示请求超时时间，默认值为0，即没有超时限制；responseType表示服务器返回的数据类型，它可以是'arraybuffer'、'blob'、'document'、'json'、'text'或'stream'；headers表示请求头，包含了我们常见的Content-Type、Authorization等信息。

除此之外，还有其他的常用Axios配置选项，例如是否跨站点发送Cookie、是否跨站点防篡改（CSRF）检查等等，我们可以在Axios官方文档中查看完整的配置选项介绍。

## 结论

Axios是一个功能强大且易于使用的HTTP客户端，它提供了许多有用的配置选项，例如baseURL、timeout、responseType、headers等等，帮助我们轻松地与后端进行交互。在实际使用中，我们通常需要根据具体的业务需求来选择和配置这些选项，以达到最佳的使用效果。