当前位置：首页 > uni-app

uniapp安装axios

2026-03-04 18:20:45uni-app

安装 axios

在 uniapp 项目中安装 axios，可以通过 npm 或 yarn 进行安装。确保项目目录下有 package.json 文件，否则需要先初始化项目。

npm install axios
# 或
yarn add axios

配置 axios

安装完成后，需要在 uniapp 项目中配置 axios。由于 uniapp 的运行环境可能跨平台（H5、小程序、App等），部分平台对 axios 的支持有限，需要进行适配。

在项目的 utils 目录下（如果没有则新建），创建一个 request.js 文件，用于封装 axios 实例：

import axios from 'axios';

// 创建 axios 实例
const service = axios.create({
  baseURL: 'https://your-api-domain.com', // 替换为实际的 API 地址
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前可以做一些处理，例如添加 token
    // config.headers['Authorization'] = 'Bearer ' + getToken();
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理
    return response.data;
  },
  error => {
    return Promise.reject(error);
  }
);

export default service;

使用 axios

在需要发起网络请求的页面或组件中，引入封装好的 axios 实例：

import request from '@/utils/request';

// 发起 GET 请求
request.get('/api/test').then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

// 发起 POST 请求
request.post('/api/test', { data: 'test' }).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

处理跨平台兼容性

uniapp 在某些平台（如小程序）中可能无法直接使用 axios，因为小程序的环境限制。可以通过以下方式解决：

使用 uniapp 自带请求：在小程序环境中，直接使用 uni.request 替代 axios。
条件编译：根据平台动态选择请求方式。

示例代码：

// 在 utils/request.js 中
let request;
if (process.env.VUE_APP_PLATFORM === 'h5') {
  request = axios;
} else {
  request = function(config) {
    return new Promise((resolve, reject) => {
      uni.request({
        url: config.baseURL + config.url,
        method: config.method,
        data: config.data,
        success: res => resolve(res.data),
        fail: reject,
      });
    });
  };
}

export default request;