Axios实例详解

一、Axios实例化

Axios是一个用于浏览器和Node.js的基于Promise的HTTP客户端，可以使用简单的方式进行HTTP请求和响应处理。

为了更好地管理HTTP请求，我们通常需要对Axios进行实例化来使用。在创建Axios实例时，我们可以传递一些默认配置项，这些配置项将被全局使用，并且在实例请求中可以覆盖。以下是Axios实例化的示例代码：

import axios from 'axios';

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

以上示例代码创建了一个新的Axios实例，并定义了三个默认配置项：

• baseURL：用于设置请求的基础URL，将自动添加到请求URL的前面。
• timeout：用于设置请求超时时间，单位是毫秒。
• headers：用于设置请求头。

通过实例化，我们可以在整个应用中使用相同的默认配置项，并进行更灵活的个性化配置和处理。在接下来的小节中，我们将进一步介绍使用Axios实例的方式。

二、Axios实例请求中的params

在Axios实例请求时，我们可以使用params参数传递一些查询字符串（Query String）参数，以便于后端进行数据的筛选以及传递一些额外的信息。以下是使用Axios实例请求的示例代码：

instance.get('/user', {
  params: {
    name: 'example',
    age: 20
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上代码将发送一个GET请求到“/user”接口，并将“name”和“age”作为查询字符串参数传递到后端。在控制台中，我们可以看到请求的完整URL。

需要注意的是，当我们使用params参数时，Axios将自动将查询字符串参数进行编码处理，以便于在URL中传递。如果需要手动编码，则可以使用qs库进行处理。

三、Axios实例方法

Axios实例提供了一系列HTTP方法，可以使用相应的方法进行数据的请求和响应处理。以下是Axios实例提供的一些常见方法：

• instance.get(url[, config])
• instance.delete(url[, config])
• instance.head(url[, config])
• instance.options(url[, config])
• instance.post(url[, data[, config]])
• instance.put(url[, data[, config]])
• instance.patch(url[, data[, config]])

以上方法的详细使用方式，可以参考Axios官方文档。在使用Axios实例方法时，我们可以传递与实例化时的默认配置项不同的配置参数，以覆盖默认配置。以下是一个使用Axios实例POST请求的示例代码：

instance.post('/user', {
  name: 'example',
  age: 20
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上代码将发送一个POST请求到“/user”接口，并将{name: 'example', age: 20}作为请求体数据传递到后端。在控制台中，我们可以看到请求的详细信息以及响应结果。

四、Axios实例对象

在使用Axios实例时，我们可以访问到以下三个重要的对象：

• instance.defaults：包含实例的默认配置项。
• instance.interceptors：用于注册全局拦截器。
• instance.CancelToken：用于取消请求。

下面我们将对以上三个对象进行简单的介绍。

1. instance.defaults

通过访问instance.defaults，我们可以获取到实例的默认配置项，并进行修改和覆盖。以下是一些常见的操作：

• 修改实例的默认超时时间：

instance.defaults.timeout = 10000;

• 添加自定义的请求头：

instance.defaults.headers.common['Authorization'] = 'Bearer token123';

2. instance.interceptors

使用Axios时，拦截器是非常重要的。通过拦截器，我们可以在请求和响应发生前后添加一些自定义的处理逻辑。以下是Axios提供的两个拦截器：

• 请求拦截器：在发起请求前，对请求进行处理。
• 响应拦截器：在接收到响应后，对响应进行处理。

在实例化时，我们可以定义拦截器。以下是一个在请求拦截器中添加token头的示例：

instance.interceptors.request.use(
  function (config) {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

以上代码将在每次请求头中添加token信息。此处使用localStorage存储了token信息，如果需要更安全的方式存储可以使用cookie或session进行存储。

3. instance.CancelToken

有时候，我们需要在请求发送后进行取消操作，在Axios中可以通过使用CancelToken实现取消请求的功能。以下是一个使用CancelToken取消请求的示例代码：

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

instance.get('/user', {
  cancelToken: source.token
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('请求已取消：', error.message);
  } else {
    console.log(error);
  }
});

// 取消请求
source.cancel('请求被用户取消');

以上代码使用了axios.isCancel()方法判断请求是否被取消，如果被取消则打印出相应的信息。在取消请求时，我们可以传递一个错误信息，方便进行调试。

五、Axios实例什么意思

在Axios中，实例化是指创建一个新的Axios实例，使用该实例进行HTTP请求和响应处理。与全局的Axios对象不同，实例化对象具有自己的默认配置，可以通过实例对象中的方法进行请求的个性化配置。在一个应用中，可以创建多个Axios实例，以适应不同的请求需求。

六、Axios实例化内存泄漏

在应用开发中，内存泄漏是一个常见的问题，Axios也不例外。为了避免内存泄漏，我们需要在Axios实例不再使用时进行清理，以释放相应的内存。以下是Axios实例内存清理的示例代码：

instance = null;

通过将实例变量赋值为null，可以将指向实例的引用断开，从而释放相应的内存空间。

七、Axios实例js中访问

在JavaScript中，我们可以使用import来引入Axios实例，以便于使用。以下是JS中使用Axios实例的示例代码：

import { instance } from './axios-instance';

instance.get('/user')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

这里我们通过import引入了一个命名为instance的Axios实例，然后在调用时直接使用即可。

八、Axios实例的接口怎么单独带请求头

在使用Axios时，我们经常需要针对某个特定URL，添加自定义的请求头进行处理。以下是针对单个URL添加请求头的示例代码：

const headers = { 'X-Custom-Header': 'foobar' };

instance.get('/user/profile', { headers })
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上代码将添加一个名为X-Custom-Header的自定义请求头，发送一个GET请求到“/user/profile”接口。

九、Axios的实现原理

Axios是基于Promise的JavaScript HTTP客户端库，底层使用XMLHttpRequest实现。主要的实现方式是构建一个HttpRequest对象，向服务器发起请求并返回对应的响应结果。

在Axios中，Promise被广泛应用，可以通过Promise对异步请求进行封装和处理。在同步请求中，需要使用async和await进行处理。

这里我们不会过多地介绍Axios的实现原理，如果您对此感兴趣，可以查阅相关的资料进行了解。