一文带你理清Axios的有关问题

前言

我们对于Axios并不陌生，每天我们都在使用它。

Axios 是一个基于 Promise 的 HTTP 客户端，主要用于发送 HTTP 请求。它能够简化与服务器进行通信的过程，比如发送 GET、POST、PUT、DELETE 等请求。

接下来我先介绍他的几个使用方法，也就是我们平常用的几个请求方法。

这里指的是单独配置的请求：

1.GET

axios.get('https://api.example.com/users')
  .then(response => {
    console.log(response.data); // 输出服务器返回的用户数据
  })
  .catch(error => {
    console.error('Error:', error); // 处理错误
  });

同时，你也可以加上自己的 params 选项传递。

axios.get('https://api.example.com/users', {
  params: {
    id: 123  // 传递查询参数
  }
})
  .then(response => {
    console.log(response.data);
  });

2.POST

axios.post('https://api.example.com/users', {
  name: 'John',
  age: 30
})
  .then(response => {
    console.log(response.data); // 返回新创建的用户数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

3.PUT

axios.put('https://api.example.com/users/123', {
  name: 'John Doe',
  age: 31
})
  .then(response => {
    console.log(response.data); // 返回更新后的用户数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

4.DELETE

axios.delete('https://api.example.com/users/123')
  .then(response => {
    console.log('User deleted');
  })
  .catch(error => {
    console.error('Error:', error);
  });

5.all

最后这一个不是请求方法，我也是最近看文档才知道，但是不是很难，只是才知道也可以这样用，我们都知道Promise.all（）这个方法，是用来做并发的，这个其实也是同样的作用。用法如下：

axios.all([
  axios.get('/data1'),
  axios.get('/data2')
])
.then(axios.spread((response1, response2) => {
  console.log('Data 1:', response1.data);
  console.log('Data 2:', response2.data);
}));

6. (Async/Await)搭配使用

Axios和async/await非常搭配，可以让异步代码变得更清晰。

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

以上呢就是我们单独配置请求时候使用的几个方法吧，只适用我们做一些调研或者学习使用的。但是在我们的项目中，我们都是需要封装Axios请求的。

7.Axios请求封装

首先我给大家先说一下我的思路：

        1.创建Axios的实例：设置基础配置

        2.添加请求拦截器：可以在请求发送之前做一些操作，如添加认证Token

        3.添加响应拦截器：可以在响应返回时全局做一些错误处理或者数据处理

接下来看代码，只是看思路

import axios from 'axios';

// 1. 创建 Axios 实例
const service = axios.create({
  baseURL: 'https://api.example.com', // API的基础URL
  timeout: 5000, // 请求超时的时间
  headers: {
    'Content-Type': 'application/json'
  }
});

// 2. 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`; // 携带 token
    }
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

// 3. 响应拦截器
service.interceptors.response.use(
  response => {
    // 处理响应数据
    const res = response.data;
    if (res.code !== 200) {  // 假设后端返回的状态码为200表示成功
      console.error(res.message || 'Error');
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;  // 返回成功的数据
    }
  },
  error => {
    // 处理响应错误，比如 token 过期、网络错误等
    console.error('Error: ' + error.message);
    return Promise.reject(error);
  }
);


// 导出封装的实例
export default service;

那么我们在接下来就可以使用这个文件，在api.js文件中

import service from './request'; // 引入封装好的模块

// 登录
export function userLogin(data) {
  return service.post('/login', data)
}

那么在组件中我们需要引入就行了，然后再去这样使用

<script setup>
import { ref } from 'vue';
import { userLogin } from './api'; // 引入封装好的API

// 定义响应式变量
const username = ref('');
const password = ref('');
const error = ref(null);

// 处理登录请求的函数
const handleLogin = async () => {
  error.value = null; // 重置错误信息
  const loginData = {
    username: username.value,
    password: password.value
  };
  
  try {
    // 使用 async/await 调用登录请求
    const response = await userLogin(loginData);
    console.log('Login success:', response); // 登录成功后的处理
    // 在这里可以进行页面跳转或保存 token
  } catch (err) {
    console.error('Login failed:', err);
    error.value = 'Login failed. Please check your credentials and try again.'; // 显示错误信息
  }
};
</script>