vue调用OData接口

OData （Open Data Protocol） 是经 ISO/IEC 批准的 OASIS 标准，它定义了一组用于构建和使用 RESTful API 的最佳实践。OData 可帮助您在构建 RESTful API 时专注于业务逻辑，而无需担心定义请求和响应标头、状态代码、HTTP 方法、URL 约定、媒体类型、有效负载格式、查询选项等的各种方法。OData 还为跟踪更改、为可重用过程定义函数/作以及发送异步/批处理请求提供了指导。

官网地址：OData
文档参考：OData v4 官方规范

Vue 前端调用 OData 接口

一、基础调用流程

1. 安装 axios

npm install axios

2. 创建 OData 工具类 (utils/odata.js)

import axios from 'axios';

const odataClient = axios.create({
   
  baseURL: 'https://api.example/odata/', // OData 服务根地址
  headers: {
   
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

// 统一错误处理
odataClient.interceptors.response.use(
  response => response,
  error => {
   
    console.error('OData Error:', error.response?.data || error.message);
    return Promise.reject(error);
  }
);

export default odataClient;

二、常用 OData 操作示例

1. 基础查询（GET）

<script>
import odataClient from '@/utils/odata';

export default {
  data() {
    return {
      products: [],
      totalCount: 0
    };
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await odataClient.get('Products', {
          params: {
            $select: 'Id,Name,Price',
            $filter: 'Price gt 100',
            $orderby: 'Name desc',
            $top: 10,
            $count: true
          }
        });
        
        this.products = response.data.value;
        this.totalCount = response.data['@odata.count'];
      } catch (error) {
        // 错误已在拦截器处理
      }
    }
  },
  mounted() {
    this.fetchProducts();
  }
};
</script>

2. 分页查询

params: {
   
  $top: pageSize,
  $skip: (cur