【JS】node.js之axios发起HTTP网络请求的使用教程

Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js 中发送 HTTP 请求。以下是 Axios 的一些基本使用方法：

安装 Axios

在使用 Axios 之前，需要先安装它。你可以使用 npm 或 yarn 来安装：

npm install axios

或者

yarn add axios

基本用法

发送 GET 请求

const axios = require('axios'); // 如果在前端使用，可以直接通过 <script> 标签引入

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

发送 POST 请求

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

配置请求

你可以在请求中配置各种选项，例如 URL、方法、headers、params 等：

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  data: {
    name: 'John Doe',
    age: 30
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

使用 Axios 实例

你可以创建一个 Axios 实例来设置默认配置：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'Authorization': 'Bearer YOUR_TOKEN'}
});

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

拦截器

Axios 提供了请求和响应拦截器，可以在请求或响应被 then 或 catch 处理前进行一些操作：

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

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

取消请求

你可以使用 CancelToken 来取消请求：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(response => {
    console.log(response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // 处理错误
    }
  });

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

并行请求

你可以使用 axios.all 来并行处理多个请求：

axios.all([
  axios.get('https://api.example.com/data1'),
  axios.get('https://api.example.com/data2')
])
  .then(axios.spread((response1, response2) => {
    console.log('Data1:', response1.data);
    console.log('Data2:', response2.data);
  }))
  .catch(error => {
    console.error('Error fetching data:', error);
  });

这些示例展示了 Axios 的一些基本功能和用法。根据你的具体需求，你还可以进一步配置和扩展 Axios。