Axios API.js，如何使用和优化这个强大的HTTP客户端库？

Axios API.js: 深入理解和应用

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js，它支持异步请求，并自动转换 JSON 数据，本文将详细介绍如何安装、配置和使用 Axios，并提供一些常见问题及其解答。

一、安装与引入

1 通过 npm 安装

npm install axios

2 在项目中引入

const axios = require('axios');

二、基本用法

1 GET 请求

axios.get('https://api.example.com/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

2 POST 请求

axios.post('https://api.example.com/data', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

三、请求与响应拦截器

1 请求拦截器

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

2 响应拦截器

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

四、取消请求

const CancelToken = axios.CancelToken;
let cancel;
axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
// 取消请求
cancel('Request canceled by the user.');

五、上传文件

const formData = new FormData();
formData.append('file', file);
axios.post('https://api.example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

六、并发请求

function getHTTPRequest(url) {
  return axios.get(url)
    .then(function (response) {
      return response.data;
    });
}
Promise.all([getHTTPRequest('https://api.example.com/endpoint1'), getHTTPRequest('https://api.example.com/endpoint2')])
  .then(function (results) {
    console.log(results); // [response1.data, response2.data]
  })
  .catch(function (error) {
    console.log(error);
  });

七、超时设置

axios.get('https://api.example.com/data', {
  timeout: 1000, // 1秒后超时
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  if (error.code === 'ECONNABORTED') {
    console.log('Request timed out');
  } else {
    console.log(error);
  }
});

八、全局配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';

九、实例配置

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

十、相关问题与解答

问题1：如何在 Axios 中处理跨域请求？

解答：Axios 本身不处理跨域问题，这需要在服务器端进行配置，在 Express 中可以使用cors 中间件来允许跨域请求。

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/data', (req, res) => {
  res.json({ message: 'Hello World' });
});
app.listen(3000,
  () => console.log('Server running on port 3000'));

问题2：如何在 Axios 中处理身份验证？

解答：可以在请求头中添加身份验证信息，如 Bearer Token，也可以使用拦截器统一处理身份验证。

axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN';

小伙伴们，上文介绍了“axios api.js”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。