一篇搞懂Axios http请求

大白话介绍

简单来说, Axios 就是请求数据的一种http库

基于Promise,用于在浏览器和Node.js环境中发送http请求

直接上手

现在既然知道了它的作用,让我们接下来看看它的使用场景 ( 我建议有基础的小伙伴直接看封装使用部分,看完你也就会了! ):

在这里我主要介绍一下它在项目中的封装以及用法,简单提一下单独的使用,一般项目都会进行封装,因为没有人会每次请求都传一遍基础数据

单独使用(不是重点):

我这里以vue2的使用为例,需要vue3事例滴小伙子们可以滴我

// api.js

import axios from 'axios';

const baseURL = 'https://api.example.com';

const instance = axios.create({
  baseURL,
  timeout: 10000,
});

// 封装 GET 请求
export const fetchData = (url, params) => {
  return instance.get(url, { params })
    .then(response => response.data)
    .catch(error => {
      throw error;
    });
};

在 Vue 组件中使用：

import { fetchData } from './api';

export default {
  data() {
    return {
      responseData: null,
    };
  },
  mounted() {
    fetchData('/data')
      .then(data => {
        this.responseData = data;
      })
      .catch(error => {
        console.error('Error:', error);
      });
  },
};

封装使用(重点来了)

1.安装引入

使用 npm：
npm install axios

使用 yarn：
yarn add axios

首先在封装的文件中,引入axios,比如创建一个request.js文件

2.创建实例

通过 axios.create 创建实例,这里需要放请求地址的url,还可以选择性的传放其余的参数,如请求头,请求参数等,建议在这里只传 url 就可以,其余的参数可以放在请求拦截器中

3.请求拦截器

请求拦截器允许我们在发送请求之前对请求进行修改或添加一些额外的配置，例如添加请求头、验证用户身份、处理请求参数等,下面代码块中包含对于以下四部分的代码示例

1. 添加请求头信息： 在请求拦截器中，我们可以通过修改请求配置 config 对象来添加请求头信息，例如用户认证信息、授权信息等。

2. 参数处理： 可以对请求参数进行处理，例如序列化、加密等操作。

3. 请求参数验证： 在发送请求之前，可以对请求参数进行验证，确保参数的有效性和完整性。

4. 请求日志记录： 可以在发送请求之前记录请求的相关信息，用于调试和监控。

4.响应拦截器

响应拦截器在 Axios 中的作用是在接收到后端响应数据之后，对响应进行统一处理。

你可以对返回的数据进行修改、过滤、处理错误等操作，比如设置对全局的响应码状态的拦截,如果当前是过期的值,那么就判断进行退出登录等相关业务需求。

instance.interceptors.response.use() 方法注册响应拦截器

接收两个参数：一个成功的处理函数和一个失败的处理函数

5.引入使用

在 api 文件中，你直接使用了导入的 request 对象来发送请求，因为在 request.js 文件中创建的 instance 实例被默认导出了，所以在 api 文件中直接引用即可，无需再进行额外的导出操作。 

// request.js

import axios from 'axios';

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置统一的基础 URL
  timeout: 10000, // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 可以在此处添加请求头信息等
    config.headers.Authorization = 'Bearer ' + getToken(); // 假设 getToken() 是获取用户认证信息的函数

    // 参数处理和验证示例
    if (config.method === 'post') {
      // 对 post 请求参数进行验证
      if (!config.data) {
        console.error('请求参数不能为空');
        return Promise.reject(new Error('请求参数不能为空'));
      }
      // 对参数进行处理，例如序列化
      config.data = JSON.stringify(config.data);
    }

    // 记录请求日志
    console.log('发送请求:', config);

    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

// api文件

import request from './request.js'; // 引入

// 封装请求函数
export const getUserInfo = (userId) => {
  return request.get(`/user/${userId}`);
};

export const createUserInfo = (data) => {
  return request.post('/user', data);
};

OK 介绍到此结束,看到这如果觉得没什么难度,并且都可以理解,那么恭喜你🎉你也成功激活了axios的使用权 ~