vue2项目调用后端接口

1.要在 Vue2 中使用 axios 调接口并封装一个方法，首先需要安装 axios：

 npm install axios@1.5.0 --save

2.然后在 Vue 项目中创建一个名为 http.js 的文件，用于封装 axios 请求：

// http.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 你的API地址
  timeout: 1000,
});

export function request(config) {
  return new Promise((resolve, reject) => {
    instance(config)
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}

3.在需要使用 axios 的地方引入 request 方法并调用：

<template>
  <div>
    <!-- Your template content here -->
  </div>
</template>

<script>
import { request } from './http';

export default {
  data() {
    return {
      someData: null,
    };
  },
  methods: {
    fetchData() {
      // 在这里传递参数
      const params = {
        id: 123, // 例如，传递一个ID参数
      };

      request({
        url: '/data/get', // 假设这是你的API端点
        method: 'get',
        params, // 传递参数
      })
        .then(response => {
          console.log(response.data);
          this.someData = response.data; // 将返回的数据存储在组件的data属性中
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

4.

在这个示例中，fetchData 方法使用 axios 发送了一个 GET 请求到 /data/get 端点，并附带了 id 参数。你可以在 params 对象中添加更多键值对来传递更多参数。

当请求成功时，你可以将返回的数据保存在组件的 data 属性中，以便在模板中使用。如果请求失败，错误信息将被记录在控制台中。

请确保你的 API 端点和参数与你的实际后端服务相匹配。