当前位置:首页 > uni-app

uniapp安装axios

2026-01-13 18:31:58uni-app

安装axios

在uniapp项目中安装axios需要确保项目支持node_modules管理。通过npm或yarn安装axios:

npm install axios
# 或
yarn add axios

创建axios实例

在项目根目录下新建utils/http.js文件,配置axios实例和拦截器:

import axios from 'axios'

const http = axios.create({
  baseURL: 'https://your-api-domain.com', // 替换为实际API地址
  timeout: 10000
})

// 请求拦截器
http.interceptors.request.use(config => {
  // 可在此添加token等全局headers
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
http.interceptors.response.use(response => {
  return response.data
}, error => {
  return Promise.reject(error)
})

export default http

全局挂载(可选)

main.js中将axios挂载到Vue原型上:

uniapp安装axios

import http from './utils/http.js'
Vue.prototype.$http = http

使用示例

在页面或组件中调用接口:

// 方法1:直接引入
import http from '@/utils/http.js'
http.get('/api/test').then(res => {})

// 方法2:通过this调用(需全局挂载)
this.$http.post('/api/submit', {data: 123})

注意事项

  1. 需在manifest.json中配置网络白名单:

    uniapp安装axios

    "networkTimeout": {
    "request": 10000
    }
  2. 小程序端需额外配置合法域名,在微信开发者工具中设置。

  3. 如果遇到跨域问题,开发阶段可配置代理,生产环境需后端支持CORS。

  4. H5端需注意浏览器兼容性问题,必要时添加polyfill。

标签: uniappaxios
分享给朋友:

相关文章

uniapp设置背景

uniapp设置背景

设置全局背景样式 在App.vue文件中添加全局样式,使用page选择器设置页面背景。这种方式会影响所有页面背景。 <style> page { background-col…

uniapp设置title

uniapp设置title

设置页面标题的方法 在UniApp中设置页面标题可以通过以下几种方式实现,适用于不同场景和需求。 通过pages.json配置 在pages.json文件中,可以为每个页面单独配置导航栏标题。找到对…

丸子uniapp

丸子uniapp

丸子UniApp简介 丸子UniApp是一个基于UniApp框架开发的移动应用解决方案,通常用于快速构建跨平台应用(如微信小程序、H5、Android/iOS等)。其核心特点是利用UniApp的“一次…

uniapp营销

uniapp营销

营销策略 采用社交媒体推广,结合微信、微博、抖音等平台进行内容营销。通过短视频、直播等形式展示产品特点,吸引用户关注。利用KOL合作,扩大品牌影响力,提高用户信任度。 用户裂变 设计裂变活动…

uniapp图文

uniapp图文

图文混排实现方式 在uniapp中实现图文混排通常采用<rich-text>组件或自定义样式布局。<rich-text>支持解析HTML字符串,适合动态内容渲染。 <te…

uniapp 绘图

uniapp 绘图

uniapp 绘图方法 使用 Canvas 组件 uniapp 支持通过 canvas 组件实现绘图功能。在模板中声明 canvas 并设置宽度、高度和 ID,通过 JavaScript 调用绘图 A…