Axios创建实例

axios.create 方法允许你创建一个具有自定义配置的 Axios 实例。这对于需要不同基础 URL、超时设置、请求头等配置的多个请求非常有用。

创建 Axios 实例

使用 axios.create 方法可以创建一个新的 Axios 实例，该实例具有你指定的配置。

const instance = axios.create({
  baseURL: 'https://api.example.com', // 基础 URL，所有请求都会以这个 URL 作为前缀
  timeout: 1000, // 请求超时时间，单位为毫秒
  headers: {'X-Custom-Header': 'foobar'}, // 自定义请求头
  // 其他配置...
});

配置详解

• baseURL：所有请求都会自动添加这个基础 URL。这对于有统一 API 入口的项目非常有用。
• timeout：请求的超时时间（毫秒）。如果请求超过这个时间还没有响应，请求将被中断。
• headers：自定义请求头。你可以在这里添加任何需要的请求头。
• params：请求参数的默认值（查询字符串参数）。这些参数将自动附加到每个请求的 URL 后面。
• withCredentials：是否允许跨站请求携带凭证（如 cookies）。默认为 false。
• responseType：期望服务器返回的数据类型。可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'。
• maxRedirects：在 node.js 中，HTTP 请求的最大重定向次数。默认为 5。
• httpAgent 和 httpsAgent：在 node.js 中，用于自定义代理的设置。
• auth：一个对象，包含用户名和密码，用于基本认证。
• validateStatus：一个函数，用于确定一个请求是否被认为是失败的。默认行为是状态码在 2xx 范围之外时触发错误。

使用实例发起请求

一旦你创建了 Axios 实例，就可以使用它来发起请求，就像使用默认的 Axios 一样。

instance.get('/endpoint')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

或者，如果你更喜欢使用 async/await 语法：

async function fetchData() {
  try {
    const response = await instance.get('/endpoint');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

拦截器

你还可以为你的 Axios 实例添加请求和响应拦截器，以在请求发送之前或响应接收之后执行一些逻辑。

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  console.log('Request Interceptor:', config);
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做点什么
  console.log('Response Interceptor:', response);
  return response;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

取消请求

你还可以为你的 Axios 实例配置取消令牌，以便在需要时取消请求。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

instance.get('/endpoint', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（例如，在组件卸载时）
source.cancel('Operation canceled by the user.');

7. 总结

通过 axios.create 方法，你可以创建具有自定义配置的 Axios 实例，从而轻松管理多个具有不同需求的请求。这不仅可以提高代码的可读性和可维护性，还可以让你更好地控制请求的行为和错误处理。

本文地址：https://www.tides.cn/p_js-axios-create