Axios 高阶技巧大揭秘：进阶用法与性能优化

前言

在前端开发中，高效地进行数据请求是提升应用性能的关键。Axios作为一款功能丰富的HTTP库，提供了许多高级技术和工具，为前端工程师提供更多的自由度和掌控感。在这篇文章中，我们将揭开Axios高级技术的面纱，为你打开一扇更深入的大门。

自定义实例

自定义 Axios 实例是一种强大的方式，可以为不同类型的请求配置不同的参数。通过创建多个实例，你可以更灵活地处理各种场景的请求。以下是深入理解和创建自定义 Axios 实例的步骤：

创建自定义实例

首先，导入 Axios 并使用 create 方法创建一个自定义实例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YourAccessToken',
  },
});

在这个例子中，我们创建了一个名为 instance 的自定义 Axios 实例，设置了基础 URL、超时时间、请求头等默认配置。

使用自定义实例

使用自定义实例发送请求和全局的 Axios 几乎是一样的。你可以使用该实例的方法（如 get、post 等）发起请求：

// 使用自定义实例发起 GET 请求
instance.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

适用场景

1. 不同的 API 地址： 如果你的应用需要从多个不同的 API 地址获取数据，可以为每个 API 地址创建一个自定义实例。
2. 不同的请求超时设置： 有些请求可能需要更长的超时时间，而另一些可能需要更短的。通过自定义实例，你可以为不同的请求设置不同的超时时间。
3. 不同的请求头配置： 有些请求可能需要特定的请求头，而其他请求可能不需要。使用自定义实例，你可以为每个实例设置适当的请求头。

示例：

// 创建多个自定义实例
const apiInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YourApiAccessToken',
  },
});

const authInstance = axios.create({
  baseURL: 'https://auth.example.com',
  timeout: 3000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YourAuthAccessToken',
  },
});

// 使用自定义实例发起请求
apiInstance.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

authInstance.post('/auth/login', { username: 'user', password: 'pass' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们创建了两个不同的自定义实例：apiInstance 用于访问 API 数据，authInstance 用于进行身份验证。每个实例都有自己的配置，适应了各自的需求。

通过自定义实例，你可以更好地组织和管理不同类型请求的配置，使代码更具可维护性和可读性。

请求拦截与响应拦截

Axios 拦截器是一种强大的工具，允许你在请求发送前和响应返回后执行更复杂的操作。拦截器是全局的，可以在任何请求中使用，通过它你可以修改请求配置、在请求发送前进行处理、在响应返回后进行处理等。以下是请求拦截器和响应拦截器的高级用法：

请求拦截器

请求拦截器允许你在发送请求之前对其进行修改。这在添加全局请求头、修改请求数据等方面非常有用。

axios.interceptors.request.use(
  config => {
    // 在发送请求前做些什么
    console.log('Request Interceptor:', config);

    // 修改请求配置
    config.headers['X-Requested-With'] = 'XMLHttpRequest';

    return config;
  },
  error => {
    // 处理请求错误
    console.error('Request Error:', error);
    return Promise.reject(error);
  }
);

响应拦截器

响应拦截器允许你在接收响应之前对其进行修改。这在处理全局错误、对响应数据进行处理等方面非常有用。

axios.interceptors.response.use(
  response => {
    // 在处理响应数据前做些什么
    console.log('Response Interceptor:', response);

    // 修改响应数据
    response.data = { modifiedData: response.data };

    return response;
  },
  error => {
    // 处理响应错误
    console.error('Response Error:', error);

    // 如果是特定的响应状态码，可以在这里处理

    return Promise.reject(error);
  }
);

多个拦截器

你可以创建多个拦截器，它们将按照添加的顺序依次执行。

// 添加请求拦截器
const requestInterceptorId = axios.interceptors.request.use(config => {
  console.log('Request Interceptor 1:', config);
  return config;
}, error => {
  console.error('Request Error 1:', error);
  return Promise.reject(error);
});

// 添加另一个请求拦截器
axios.interceptors.request.use(config => {
  console.log('Request Interceptor 2:', config);
  return config;
}, error => {
  console.error('Request Error 2:', error);
  return Promise.reject(error);
});

// 移除请求拦截器
axios.interceptors.request.eject(requestInterceptorId);

拦截器执行顺序

请求拦截器和响应拦截器是按照添加的顺序执行的。在上述示例中，第一个请求拦截器会比第二个先执行。

取消拦截器

你还可以通过 eject 方法取消拦截器，这在需要动态添加或移除拦截器时非常有用。

上述代码中的 axios.interceptors.request.eject(requestInterceptorId); 表示移除特定的请求拦截器。

通过这些高级用法，你可以更灵活地在请求和响应的不同阶段进行操作，实现更复杂的全局处理逻辑。

取消请求与超时处理

Axios 提供了取消请求和设置请求超时的功能，以便更好地处理异步请求。以下是关于取消请求和超时处理的深入了解：

取消请求

使用 Axios，你可以通过 CancelToken 来取消请求。首先，创建一个 CancelToken 对象：

const source = axios.CancelToken.source();

然后，将这个对象传递给请求配置中的 cancelToken 字段：

axios.get('/api/data', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error(error);
    }
  });

如果需要取消请求，调用 source.cancel() 方法：

source.cancel('Request canceled by the user.');

这将导致请求的 Promise 进入 rejected 状态，并触发相应的 catch 块。在 catch 块中，通过 axios.isCancel(error) 判断是否是因为取消而导致的错误。

超时处理

为请求设置超时时间可以防止请求长时间等待。在请求配置中使用 timeout 字段，表示请求在指定的毫秒数后超时：

axios.get('/api/data', {
  timeout: 5000 // 设置超时时间为5秒
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else if (axios.isTimeout(error)) {
      console.log('Request timeout:', error);
    } else {
      console.error(error);
    }
  });

在上述例子中，如果请求超过5秒未完成，将触发超时处理的 catch 块。同样，你可以通过 axios.isTimeout(error) 判断是否是因为超时而导致的错误。

示例

下面是一个示例，演示如何使用 CancelToken 取消请求和设置请求超时：

import axios from 'axios';

// 创建 CancelToken 对象
const source = axios.CancelToken.source();

// 发起带有超时和取消请求的 GET 请求
axios.get('/api/data', {
  timeout: 5000, // 设置超时时间为5秒
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else if (axios.isTimeout(error)) {
      console.log('Request timeout:', error);
    } else {
      console.error(error);
    }
  });

// 模拟用户取消请求
setTimeout(() => {
  source.cancel('Request canceled by the user.');
}, 2000);

在这个示例中，请求将在5秒内完成，但在2秒时模拟用户取消了请求。你可以根据实际需求调整超时时间和取消时机。

全局配置与局部配置

Axios 允许你进行全局配置和局部配置，这使得在整个应用中具有一致的设置，同时也能根据具体需求在某个请求中进行个性化的配置。以下是如何在 Axios 中进行全局配置和局部配置：

全局配置

全局配置可以在应用的入口处进行，通常是在 main.js 或者项目的配置文件中。通过 axios.defaults 对象进行设置：

// main.js or your configuration file

import axios from 'axios';

// 设置全局基础 URL
axios.defaults.baseURL = 'https://api.example.com';

// 设置全局超时时间
axios.defaults.timeout = 5000;

// 设置全局请求头
axios.defaults.headers.common['Authorization'] = 'Bearer YourAccessToken';

在这个例子中，我们设置了全局基础 URL、超时时间和一个通用的请求头。这样，所有使用 Axios 发送的请求都将带有这些配置。

局部配置

局部配置可以在每个请求中进行，通过在请求时传递一个配置对象：

axios.get('/api/data', {
  baseURL: 'https://custom-api.example.com', // 局部基础 URL，会覆盖全局配置
  timeout: 3000, // 局部超时时间，会覆盖全局配置
  headers: {
    'X-Custom-Header': 'CustomValue' // 局部请求头，会合并全局配置
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们在特定的请求中设置了局部的基础 URL、超时时间和请求头。这些配置将覆盖全局配置中的相应项。

总结

• 全局配置： 通过 axios.defaults 对象设置，适用于整个应用。
• 局部配置： 在每个请求中通过传递配置对象进行设置，适用于个别请求。

通过灵活地使用全局配置和局部配置，你可以在不同的场景中实现一致性和个性化的需求。在处理不同 API、设置不同的超时时间等情况下，这种灵活性非常有用。

Axios与Cookie

Axios 默认情况下并不处理 cookies。但你可以通过配置 withCredentials 选项来启用对 cookies 的支持。这对于在跨域请求中携带和处理 cookies 很有用。以下是关于 Axios 如何处理 cookies 的探讨：

启用 Cookies 支持

axios.get('/api/data', {
  withCredentials: true
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

通过设置 withCredentials: true，Axios 将在请求中包含跨域请求所需的凭证信息，包括 cookies。

服务器端设置

在服务器端，确保响应头包含 Access-Control-Allow-Credentials: true，以允许客户端在跨域请求中携带 cookies。

在 Express.js 中的例子：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Credentials', true);
  next();
});

注意事项

1. 同源策略： 在启用 cookies 支持时，确保请求源和目标服务器具有相同的协议、域和端口，否则浏览器将不会发送 cookies。
2. 安全性： 携带 cookies 可能涉及到安全性问题，确保你的应用和服务器有适当的安全机制来处理 cookies。

具体示例

下面是一个简单的示例，演示如何在 Axios 请求中启用和处理 cookies：

// 发起登录请求，获取 cookies
axios.post('/api/login', { username: 'user', password: 'pass' }, { withCredentials: true })
  .then(response => {
    console.log('Login successful');
    // 发起带有 cookies 的其他请求
    axios.get('/api/data', { withCredentials: true })
      .then(dataResponse => {
        console.log(dataResponse.data);
      })
      .catch(error => {
        console.error(error);
      });
  })
  .catch(error => {
    console.error('Login failed:', error);
  });

在这个例子中，首先通过登录请求获取 cookies，然后使用这些 cookies 发起其他请求。确保服务器端正确配置了 cookies，使其能够在跨域请求中被传递。

上传与下载文件

Axios 提供了处理文件上传和下载的功能，并支持监控上传和下载的进度。以下是关于如何使用 Axios 处理文件上传和下载的详细说明：

文件上传

使用 FormData 发送文件

// 创建一个 FormData 对象
const formData = new FormData();
formData.append('file', file); // file 是一个文件对象

// 发送文件上传请求
axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress: progressEvent => {
    // 处理上传进度
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${percentCompleted}%`);
  },
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

多文件上传

如果需要上传多个文件，可以将文件数组追加到 FormData 对象中：

const formData = new FormData();
files.forEach(file => {
  formData.append('files[]', file);
});

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${percentCompleted}%`);
  },
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

文件下载

// 发送文件下载请求
axios.get('/api/download', {
  responseType: 'blob', // 指定响应类型为 blob
  onDownloadProgress: progressEvent => {
    // 处理下载进度
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Download Progress: ${percentCompleted}%`);
  },
})
  .then(response => {
    // 处理文件下载
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.txt');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  })
  .catch(error => {
    console.error(error);
  });

注意事项

• 对于文件上传，确保服务器端正确处理 multipart/form-data 类型的请求，并解析文件数据。
• 对于文件下载，设置响应类型为 blob，以获取二进制数据。

通过上述示例，你可以实现文件上传和下载，并通过 onUploadProgress 和 onDownloadProgress 监控上传和下载的进度。确保根据实际需求适配服务器端的文件处理逻辑。

自定义适配器

Axios 的适配器机制允许你自定义发送请求的方式，以适应不同的请求环境。默认情况下，Axios 使用 XMLHttpRequest 进行浏览器端的请求，但你也可以配置自定义适配器以使用其他请求库或环境。以下是关于如何深入 Axios 的适配器机制并自定义适配器的详细说明：

默认适配器

Axios 默认使用 axios/lib/adapters/http 目录中的适配器，其中包括 xhr.js，用于浏览器环境，以及 http.js，用于 Node.js 环境。

自定义适配器

你可以通过在 Axios 配置中设置 adapter 选项来指定使用的适配器。这个选项可以是一个已存在的适配器函数或者一个你自定义的适配器函数。

const myAdapter = config => {
  // 在这里执行你自定义的请求逻辑
};

axios.get('/api/data', {
  adapter: myAdapter
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

自定义适配器的结构

自定义适配器是一个函数，接收 Axios 请求配置对象，并返回一个 Promise 对象，该 Promise 对象应该在请求完成时进行 resolve 或者在发生错误时进行 reject。

const myAdapter = config => {
  return new Promise((resolve, reject) => {
    // 在这里执行你自定义的请求逻辑

    // 请求成功时调用 resolve
    resolve(response);

    // 请求失败时调用 reject
    reject(error);
  });
};

适配器的使用场景

自定义适配器的使用场景包括但不限于：

• 使用不同的请求库（例如 axios/lib/adapters/xhr 使用的就是 XMLHttpRequest）。
• 在非浏览器环境中，例如 React Native 等。
• 在特定环境中使用不同的请求逻辑。

示例：使用 Axios 在 Node.js 中发起请求

在 Node.js 中，你可以使用适配器 axios/lib/adapters/http，并设置 httpAgent 和 httpsAgent，以适应 Node.js 的请求环境。

const axios = require('axios');
const http = require('http');
const https = require('https');

const instance = axios.create({
  baseURL: 'https://api.example.com',
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
});

instance.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们使用 Node.js 内置的 http 和 https 模块来设置适配器，以适应 Node.js 环境的请求。

并发请求与合并请求

Axios 提供了处理并发请求和合并请求结果的功能。以下是关于如何使用 Axios 处理并发请求以及合并多个请求结果的详细说明：

并发请求

Axios 提供了 axios.all 方法，该方法可以用于同时发起多个请求，并在所有请求都完成时触发一个回调。下面是一个简单的例子：

const request1 = axios.get('/api/data1');
const request2 = axios.get('/api/data2');

axios.all([request1, request2])
  .then(axios.spread((response1, response2) => {
    console.log('Response 1:', response1.data);
    console.log('Response 2:', response2.data);
  }))
  .catch(error => {
    console.error(error);
  });

在这个例子中，axios.all 接收一个包含多个 Axios 请求的数组，然后使用 axios.spread 处理每个请求的响应。

合并请求结果

有时候，你可能需要将多个请求的结果合并成一个单一的响应。这可以通过使用 axios.all 结合 axios.spread 来实现。

const request1 = axios.get('/api/data1');
const request2 = axios.get('/api/data2');

axios.all([request1, request2])
  .then(axios.spread((response1, response2) => {
    const mergedData = {
      data1: response1.data,
      data2: response2.data,
    };
    console.log('Merged Data:', mergedData);
  }))
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们使用 axios.all 同时发起两个请求，然后使用 axios.spread 将每个请求的响应合并为一个对象。

注意事项

• 在使用 axios.all 和 axios.spread 时，确保请求都成功完成。如果有一个请求失败，整个链将被中断，进入 catch 块。

示例：并发请求与合并结果

下面是一个更复杂的示例，演示了如何在并发请求中使用 axios.all 和 axios.spread：

const getUserData = axios.get('/api/user');
const getPostData = axios.get('/api/posts');
const getCommentsData = axios.get('/api/comments');

axios.all([getUserData, getPostData, getCommentsData])
  .then(axios.spread((userData, postData, commentsData) => {
    const result = {
      user: userData.data,
      posts: postData.data,
      comments: commentsData.data,
    };
    console.log('Merged Result:', result);
  }))
  .catch(error => {
    console.error(error);
  });

在这个示例中，我们同时发起了三个请求，获取了用户数据、文章数据和评论数据，并使用 axios.spread 将它们合并为一个对象。

Axios拓展

Axios 提供了一些拓展功能，其中包括拦截器、自定义实例、取消请求、请求和响应的转换等。以下是关于 Axios 拓展功能的详细说明：

拦截器

拦截器允许你在请求或响应被处理前拦截它们。Axios 提供了 axios.interceptors 对象，其中包括 request 和 response 属性，分别用于设置请求和响应拦截器。

请求拦截器

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

响应拦截器

axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    console.log('Response Interceptor:', response);
    return response;
  },
  error => {
    // 对响应错误做些什么
    console.error('Response Error Interceptor:', error);
    return Promise.reject(error);
  }
);

自定义实例

你可以创建自定义 Axios 实例，以便在不同的请求中使用不同的配置。这对于在不同部分的应用中灵活地使用 Axios 非常有用。

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

instance.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

取消请求

Axios 提供了取消请求的机制，允许你取消尚未完成的请求。使用 CancelToken 和 source 创建取消令牌。

const source = axios.CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error(error);
    }
  });

// 取消请求
source.cancel('Request canceled by the user.');

请求和响应的转换

你可以通过配置 transformRequest 和 transformResponse 来自定义请求和响应的转换函数。

const instance = axios.create({
  transformRequest: [function (data, headers) {
    // 对请求数据做处理
    return data;
  }],
  transformResponse: [function (data) {
    // 对响应数据做处理
    return data;
  }],
});

instance.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

拓展Axios功能

你可以通过向 Axios 实例的原型添加方法来拓展其功能。

axios.MyCustomFunction = function () {
  console.log('Custom Function Called');
};

axios.MyCustomFunction();

这样就可以在 Axios 对象上添加自定义的方法，以满足特定需求。

总结

Axios 提供了一系列的拓展功能，包括拦截器、自定义实例、取消请求、请求和响应的转换等，使其更加灵活和适应各种需求。在实际应用中，结合这些功能可以更好地控制和定制网络请求。

性能优化

性能优化是确保 Axios 数据请求在各种环境中表现出色的重要方面。以下是一些 Axios 性能优化的最佳实践：

1. 使用CDN引入

在生产环境中，考虑使用 CDN 引入 Axios，以减小应用包的体积。通过引入 CDN 版本，你可以利用缓存机制，提高加载速度，并减轻服务器的负担。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>

2. 启用Keep-Alive

在长时间运行的应用中，启用 HTTP Keep-Alive 可以减少多次请求之间的连接建立成本。在 Node.js 环境中，你可以配置 http.Agent 或 https.Agent 实例，并将其传递给 Axios 实例。

const http = require('http');
const https = require('https');

const axiosInstance = axios.create({
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
});

3. 合理使用缓存

在一些场景下，合理使用缓存可以减轻服务器的压力，并提高请求速度。你可以考虑使用浏览器缓存（例如，设置合适的 Cache-Control 头）或服务器端缓存（例如，使用缓存中间件）。

4. 减少请求数量

尽量减少不必要的请求。可以使用并发请求和合并请求的方式，减少网络请求的次数。另外，通过使用请求取消机制，及时取消不必要的请求。

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

axios.get('/api/data1', { cancelToken: source.token })
  .then(response => {
    // 处理数据
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error(error);
    }
  });

// 在需要取消请求的时候调用
source.cancel('Request canceled by the user.');

5. 启用Gzip压缩

确保服务器启用了 Gzip 压缩，以减小传输数据的大小，提高网络传输效率。

6. 避免不必要的拦截器

只添加必要的拦截器，避免在拦截器中执行不必要的逻辑。过多或复杂的拦截器可能会对性能产生一定的影响。

7. 使用最新版本

确保使用了最新版本的 Axios，以便获得性能和安全性的改进。

8. 启用懒加载

在某些场景下，可以考虑使用懒加载机制，仅在需要时再加载 Axios，而不是在应用启动时就引入。

// 懒加载 Axios
import('axios').then(axios => {
  // 使用 Axios
  axios.get('/api/data')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
});

总结

通过使用 CDN 引入、启用 Keep-Alive、合理使用缓存、减少请求数量、启用 Gzip 压缩、避免不必要的拦截器、使用最新版本和启用懒加载等最佳实践，你可以优化 Axios 的性能，确保它在各种环境中都能表现出色。

结尾

通过本文，你将不仅了解Axios的高级技术，还能够将这些技术应用到实际项目中，提升你的前端开发技能。