vue 封装axios接口

如何实现“Vue 封装 Axios 接口”

步骤概览

步骤	描述
1	安装 Axios
2	创建封装 Axios 的模块
3	在 Vue 组件中使用封装的 Axios 模块

具体步骤及代码示例

步骤一：安装 Axios

首先，你需要在项目中安装 Axios

npm install axios

步骤二：创建封装 Axios 的模块

在项目中创建一个 api.js 文件，用于封装 Axios 接口请求

// 引入 Axios
import axios from 'axios';

// 创建一个 Axios 实例
const instance = axios.create({
  baseURL: ' // 设置基础接口地址
  timeout: 5000 // 设置超时时间
});

// 封装 GET 请求
export const get = (url, params) => {
  return instance.get(url, { params });
};

// 封装 POST 请求
export const post = (url, data) => {
  return instance.post(url, data);
};

// 导出实例
export default instance;

步骤三：在 Vue 组件中使用封装的 Axios 模块

在需要发送请求的 Vue 组件中，引入封装的 Axios 模块，并调用相应的请求方法

// 引入封装的 Axios 模块
import http from './api';

export default {
  data() {
    return {
      dataList: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        // 发起 GET 请求
        const response = await http.get('/data');
        this.dataList = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
}

状态图示例

stateDiagram
    [*] --> 安装 Axios
    安装 Axios --> 创建封装 Axios 的模块
    创建封装 Axios 的模块 --> 在 Vue 组件中使用封装的 Axios 模块
    在 Vue 组件中使用封装的 Axios 模块 --> [*]

通过以上步骤，你就成功地实现了 Vue 封装 Axios 接口的功能。希望你能够通过这篇文章快速掌握相应的知识点，加油！