完成Axios的二次封装，实现接口统一管理，使用数据代理解决跨域问题

Axios 二次封装

1. 接口统一管理

• 创建一个 api 文件夹来存储所有 API 接口。
• 创建一个 index.js 文件来统一管理所有 API 接口。
• 使用 Axios 发送请求。

示例

JavaScript

// api/index.js

import axios from 'axios';

const api = {
  getUser() {
    return axios.get('/api/user');
  },
  deleteUser(id) {
    return axios.delete('/api/user/' + id);
  }
};

export default api;

// 使用示例

import api from './api';

api.getUser().then((response) => {
  console.log(response.data);
});

2. 使用数据代理解决跨域问题

• 在 package.json 文件中添加 proxy 配置。
• 在发送请求之前，将 URL 代理到代理服务器。

示例

JavaScript

// package.json

{
  "proxy": "http://localhost:8080"
}

// 使用示例

import axios from 'axios';

axios.get('/api/user').then((response) => {
  console.log(response.data);
});

完整代码

JavaScript

// api/index.js

import axios from 'axios';

const api = {
  getUser() {
    return axios.get('/api/user');
  },
  deleteUser(id) {
    return axios.delete('/api/user/' + id);
  }
};

export default api;

// main.js

import Vue from 'vue';
import App from './App.vue';
import api from './api';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

// 使用示例

api.getUser().then((response) => {
  console.log(response.data);
});

总结

• 可以通过接口统一管理来简化代码。
• 可以通过数据代理来解决跨域问题。