在uniApp中使用Uni API进行网络请求的示例

// api/request.js
const baseURL = 'http://127.0.0.1:3000';

export default function request(url, method = 'GET', data = {}) {
  // 请求拦截器
  const beforeRequest = interceptor.request.before || (config => config);
  // 响应拦截器
  const afterResponse = interceptor.response.after || (response => response);

  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + url, // 拼接完整的请求地址
      method: method,
      data: beforeRequest(data), // 请求拦截器处理请求数据
      success: res => {
        const responseData = afterResponse(res.data); // 响应拦截器处理响应数据
        resolve(responseData);
      },
      fail: err => {
        reject(err);
      }
    });
  });
}

现在，当你调用封装的请求方法时，只需要传入相对路径，它会自动与baseURL拼接为完整的请求地址。示例代码如下：

import request from '@/api/request.js';

request('/api/user', 'GET')
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });

request('/api/user', 'POST', { username: 'john', password: 'secret' })
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import { getSongListCategories } from '@/api/api.js';

export default {
  methods: {
    fetchData() {
      getSongListCategories()
        .then(res => {
          // 处理返回的数据
          console.log(res);
        })
        .catch(err => {
          // 处理请求错误
          console.error(err);
        });
    }
  },
  onLoad() {
    this.fetchData();
  }
};
</script>

<style scoped>
/* 样式定义 */
</style>