axios.js 如何在项目中实现跨域请求并处理错误？

axios.js的核心概念与设计理念

axios.js是一个基于Promise的HTTP客户端，专为浏览器和Node.js环境设计，它的核心目标是简化HTTP请求的发送与处理，同时提供灵活的配置选项和强大的功能扩展能力，与传统的XMLHttpRequest相比，axios通过Promise API解决了回调地狱问题，使异步代码更易读、易维护，其设计理念围绕“简洁、高效、可扩展”展开，既支持基础请求功能，又提供了拦截器、请求/响应转换、自动数据转换等高级特性，成为现代前端开发中不可或缺的工具之一。

核心功能与特性

基于Promise的异步处理

axios完全遵循Promise规范,每个请求返回一个Promise对象，支持.then()和.catch()链式调用，也兼容async/await语法，这种设计让开发者能够以同步的方式编写异步代码，显著提升了代码的可读性。

axios.get('/api/data')  
  .then(response => console.log(response.data))  
  .catch(error => console.error(error));  
// 或使用async/await  
async function fetchData() {  
  try {  
    const response = await axios.get('/api/data');  
    console.log(response.data);  
  } catch (error) {  
    console.error(error);  
  }  
}

请求与响应拦截器

拦截器是axios的一大亮点,允许在请求发送前或响应接收后对数据进行统一处理，可以在请求拦截器中添加认证token，或在响应拦截器中统一处理错误信息：

// 请求拦截器  
axios.interceptors.request.use(config => {  
  config.headers.Authorization = 'Bearer ' + token;  
  return config;  
}, error => Promise.reject(error));  
// 响应拦截器  
axios.interceptors.response.use(response => {  
  return response.data;  
}, error => {  
  if (error.response.status === 401) {  
    // 处理未授权错误  
  }  
  return Promise.reject(error);  
});

自动数据转换

axios会自动转换请求和响应数据,默认情况下，JSON数据会被自动序列化为请求体，同时将响应数据解析为JSON对象，开发者也可以通过transformRequest和transformResponse自定义转换逻辑：

axios.post('/api/user', { name: 'John' }, {  
  transformRequest: [data => {  
    // 自定义请求数据转换  
    return JSON.stringify(data);  
  }]  
});

取消请求

axios提供了CancelToken API，允许取消正在进行的请求，这在需要避免重复请求或取消长时间未响应的任务时非常有用：

const source = axios.CancelToken.source();  
axios.get('/api/data', { cancelToken: source.token });  
// 取消请求  
source.cancel('Operation canceled by the user.');

常用API与配置选项

axios提供了丰富的API,涵盖GET、POST、PUT、DELETE等HTTP方法，并支持灵活的配置选项，以下为最常用的几种方法：

请求方法

axios(config)：通用请求方法，支持自定义配置。
axios.request(config)：与axios(config)等价。
axios.get(url, config)：GET请求。
axios.post(url, data, config)：POST请求。
axios.put(url, data, config)：PUT请求。
axios.delete(url, config)：DELETE请求。

发送一个带有查询参数和请求头的GET请求：

axios.get('/api/users', {  
  params: { page: 1, limit: 10 },  
  headers: { 'X-Custom-Header': 'value' }  
});

全局配置

通过axios.defaults可以设置全局默认配置，避免重复代码：

axios.defaults.baseURL = 'https://api.example.com';  
axios.defaults.headers.common['Authorization'] = 'token';  
axios.defaults.timeout = 5000; // 请求超时时间

实例化配置

当需要不同的请求配置时,可以创建axios实例：

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

错误处理机制

axios的错误处理分为两类：网络错误和HTTP状态错误，网络错误（如请求超时、断网）会直接触发catch回调，而HTTP状态错误（如404、500）则需要通过error.response访问响应数据，开发者可以根据错误类型采取不同的处理策略：

axios.get('/api/data')  
  .catch(error => {  
    if (error.response) {  
      // 请求已发出，服务器返回状态码不在2xx范围内  
      console.error('Status:', error.response.status);  
    } else if (error.request) {  
      // 请求已发出，但没有收到响应  
      console.error('No response received');  
    } else {  
      // 请求配置出错  
      console.error('Request error:', error.message);  
    }  
  });

浏览器与Node.js环境适配

axios在浏览器和Node.js中均能良好运行，在浏览器中，它使用XMLHttpRequest发送请求；在Node.js中，则使用内置的http模块，这种跨环境的设计使其成为全栈开发的理想选择，在Node.js中发送请求：

const axios = require('axios');  
axios.get('https://api.example.com/data')  
  .then(response => console.log(response.data));

生态系统与扩展

axios拥有活跃的社区和丰富的扩展生态。axios-retry可用于自动重试失败请求，axios-mock-adapter可模拟后端API用于测试，许多现代前端框架（如Vue.js、React）也提供了基于axios的封装库，进一步简化了API调用流程。

axios.js凭借其简洁的API、强大的功能和良好的兼容性，成为前端HTTP请求的首选工具，无论是基础的数据请求，还是复杂的拦截器配置、错误处理，axios都能提供优雅的解决方案，通过合理使用其特性，开发者可以显著提升开发效率，构建更加健壮和可维护的应用程序。

图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/131564.html