uni-app axios集成

在uni-app中集成axios进行HTTP请求处理是一个常见的需求。下面是一个详细的代码示例，展示了如何在uni-app项目中集成并使用axios。

1. 安装axios

首先，确保你的uni-app项目已经初始化完成。在项目根目录下，通过npm安装axios：

npm install axios

2. 创建axios实例

在项目的src目录下，创建一个名为http.js的文件，用于配置和导出axios实例。

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

const instance = axios.create({
  baseURL: 'https://api.example.com', // 替换为你的API基础URL
  timeout: 10000, // 请求超时时间
  headers: { 'Content-Type': 'application/json' }
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在这里可以添加token等请求头
    // config.headers['Authorization'] = 'Bearer ' + token;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default instance;

3. 在页面或组件中使用axios

现在你可以在任何页面或组件中引入并使用这个axios实例。例如，在pages/index/index.vue中：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
import http from '@/http';

export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await http.get('/endpoint'); // 替换为你的API端点
        this.message = response.message;
      } catch (error) {
        console.error('请求失败:', error);
      }
    }
  },
  onLoad() {
    this.fetchData();
  }
};
</script>

4. 注意事项

• 确保你的API基础URL和端点是正确的。
• 在请求拦截器中，你可能需要添加一些全局的请求头，比如认证token。
• 在响应拦截器中，你可以处理一些全局的响应错误，比如统一处理401未授权错误。
• 考虑到uni-app支持多端运行，确保你的API在目标平台上是可访问的。

通过上述步骤，你应该能够在uni-app项目中成功集成并使用axios进行HTTP请求。