任务2-2知识技能：api目录index.js作用

在 UniApp 项目中，api 目录通常用于组织和管理与后端服务器的接口请求。index.js 文件在这个目录中扮演着重要角色，通常用于集中管理 API 请求的方法，并将这些方法暴露给其他模块使用。这不仅有助于代码的组织，也提升了网络请求的可维护性和复用性。

index.js 的作用

• 统一管理网络请求：将所有与后端 API 的交互代码集中在一个地方，方便统一管理和修改。

• 封装请求逻辑：减少重复代码，比如通用的 headers、请求的处理逻辑、错误的全局处理等。

• 暴露接口方法：通过模块的导出，其他地方可以很方便地使用定义好的 API 调用。

示例：index.js文件结构及网络请求封装

以下是一个简单的 index.js 文件结构的例子，它使用了 UniApp 的 uni.request() 方法进行网络请求。

// api/index.js

// 配置基础URL
const BASE_URL = 'https://api.example.com';

// 封装通用请求方法
function request(url, method, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + url,
      method: method,
      data: data,
      header: {
        'Content-Type': 'application/json'
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(`Error: ${res.statusCode}`);
        }
      },
      fail: (error) => {
        reject(error);
      }
    });
  });
}

// 导出具体的请求方法
export function getExampleData() {
  return request('/example-endpoint', 'GET');
}

export function postExampleData(data) {
  return request('/example-endpoint', 'POST', data);
}

export function putExampleData(id, data) {
  return request(`/example-endpoint/${id}`, 'PUT', data);
}

export function deleteExampleData(id) {
  return request(`/example-endpoint/${id}`, 'DELETE');
}

使用方法

在你需要使用这些 API 请求的地方，引入并调用相应的方法即可：

// 在某个Vue组件中使用
import { getExampleData, postExampleData } from '@/api/index';

export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    async fetchData() {
      try {
        const data = await getExampleData();
        this.items = data;
      } catch (error) {
        console.error('Failed to fetch data:', error);
      }
    },
    async sendData() {
      const postData = { name: 'UniApp', type: 'demo' };
      try {
        const response = await postExampleData(postData);
        console.log('Data posted successfully:', response);
      } catch (error) {
        console.error('Failed to post data:', error);
      }
    }
  }
};

重点说明

• Error Handling：在封装的请求中处理 HTTP 状态码，可以根据实际需求自定义错误处理逻辑。
• Base URL: 可根据不同环境（开发、测试、生产）进行动态配置。
• 扩展和维护：当需要添加新的 API 接口时，只需在 index.js 中增加相应的方法，保持项目的整洁和易维护性。

通过这种方式管理 API 请求，可以使你的项目更加模块化、易读且易于处理复杂的请求逻辑。