在 Vue 2 中封装 Axios 请求可以更好地管理和复用 API 调用（附加MD5 加密）。

1. 安装 Axios

npm install axios

2. 创建 Axios 实例

在项目的 src 目录下创建一个 api 文件夹，并在其中创建一个 axios.js 文件：

// src/api/axios.js
import axios from 'axios';

// 创建一个 axios 实例
const service = axios.create({
  baseURL: 'www.baidu.com/api', // API 基础地址
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

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

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    console.error('API error:', error);
    return Promise.reject(error);
  }
);

export default service;

3. 创建 API 方法

在 src/api 文件夹中创建一个 index.js 文件，用于定义 API 方法：

// src/api/index.js
import service from './axios';

// 示例 API 请求
export function getUser(id) {
  return service.get(`/user/${id}`);
}

export function createUser(data) {
  return service.post('/user', data);
}

export function updateUser(id, data) {
  return service.put(`/user/${id}`, data);
}

export function deleteUser(id) {
  return service.delete(`/user/${id}`);
}

4. 在 Vue 组件中使用封装的 API 方法

在你的 Vue 组件中引入并使用封装好的 API 方法：

<template>
  <div>
    <h1>User Information</h1>
    <p v-if="user">{{ user.name }} - {{ user.email }}</p>
  </div>
</template>

<script>
import { getUser } from '@/api';

export default {
  data() {
    return {
      user: null,
    };
  },
  async created() {
    try {
      const response = await getUser(1);
      this.user = response;
    } catch (error) {
      console.error('Failed to fetch user:', error);
    }
  },
};
</script>

<style>
/* 添加一些样式 */
</style>

然后我还用到了MD5 加密，可以使用 crypto-js 库来进行 MD5 加密。以下是如何使用 crypto-js 进行 MD5 加密并封装 Axios 请求的示例。

1. 安装 crypto-js

npm install crypto-js

2. 创建 Axios 实例

在 src/api 文件夹中创建一个 axios.js 文件，并添加以下代码：

// src/api/axios.js
import axios from 'axios';
import CryptoJS from 'crypto-js';

// 创建一个 axios 实例
const service = axios.create({
  baseURL: 'https://www.baidu.com/api', // API 基础地址
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前进行 MD5 加密处理
    const appSecret = 'dwkdw54d5w6wf545fwsss';
    const requestData = config.data;
    
    if (requestData) {
      const jsonString = JSON.stringify(requestData);
      const md5First = CryptoJS.MD5(jsonString.replace(/:/g, '@')).toString();
      const md5Second = CryptoJS.MD5(md5First + appSecret).toString();
      
      // 将加密后的签名添加到请求 URL 中
      config.url += `?sign=${md5Second}`;
    }
    
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    console.error('API error:', error);
    return Promise.reject(error);
  }
);

export default service;

3. 创建 API 方法

在 src/api 文件夹中创建一个 index.js 文件，用于定义 API 方法：

// src/api/index.js
import service from './axios';

// 示例 API 请求
export function fetchData() {
  const requestData = {
    参数：
    name: dwww
  };

  return service.post('/aush/token', requestData);
}

接下来直接去引入使用就可以了