Axios的使用方法

一.什么是Axios

Axios 是一个流行的基于 Promise 的 HTTP 请求库，用于在浏览器和 Node.js 中进行 HTTP 请求。它提供了简单易用的 API，可以发送各种类型的请求(如 GET、POST、PUT、DELETE等)，并处理响应数据。

二.Axios安装

使用npm:

npm install axios

使用 yarn:

yarn add axios

三.Axios的使用

发送get请求

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

发送post请求

axios.post('/url/data', {
    key1: 'value1',
    key2: 'value2'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

发送put请求

axios.put('/url/data/1', {
    key1: 'newValue1',
    key2: 'newValue2'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error updating data:', error);
  });

发送patch请求

axios.patch('/url/data/1', {
    key1: 'updatedValue1'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error patching data:', error);
  });

发送delelte请求

import axios from 'axios';

axios.delete('/url/data/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error deleting data:', error);
  });

并发请求

const axios = require('axios');

const request1 = axios.get('https://api.example.com/resource1');
const request2 = axios.get('https://api.example.com/resource2');

Promise.all([request1, request2])
  .then((responses) => {
    const response1 = responses[0];
    const response2 = responses[1];

    // 在这里处理 response1 和 response2
  })
  .catch((error) => {
    // 处理错误
  });

四.拦截器

请求拦截器

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer your_token';
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response;
}, error => {

  return Promise.reject(error);
});

取消拦截器

// 添加请求拦截器
const requestInterceptor = axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer your_token';
  return config;
}, error => {

  return Promise.reject(error);
});

// 取消请求拦截器
axios.interceptors.request.eject(requestInterceptor);

五.实例

全局配置

在这里队axios全局配置
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',//请求地址
  timeout: 10000,//请求超时时间
  headers: {
    'Content-Type': 'application/json',
  }
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，比如添加认证token
    config.headers.Authorization = 'Bearer your_token';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    if (response.status === 200) {
      // 请求成功，返回响应数据
      return response.data;
    } else {
      // 其他状态码的处理
      return Promise.reject(new Error(`Unexpected status code: ${response.status}`));
    }
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // 服务器返回了一个状态码，在2xx范围之外
      if (error.response.status === 500) {
        // 处理500服务器错误
        console.error('Server error:', error.response.data);
        return Promise.reject(new Error('Server error'));
      }
      console.error('Error data:', error.response.data);
      console.error('Error status:', error.response.status);
    } else if (error.request) {
      // 请求已经发出，但没有收到响应
      console.error('No response received:', error.request);
    } else {
      // 发生了其他错误
      console.error('Error:', error.message);
    }
    return Promise.reject(error);
  }
);

当发送后端请求时，请求拦截器对请求进行拦截，判断请求有没有携带所需参数，接受后端响应时，对响应数据进行拦截，判断后端返回的code码，对响应数据封装