当前位置:首页 > 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面试问啥

技术基础类问题 UniApp框架特性 跨端实现原理及条件编译的使用场景 如何理解"一次开发,多端运行"的优缺点 rpx与vw/vh单位的适配差异 Vue相关 生命周期在UniA…

uniapp如何赋值

uniapp如何赋值

uniapp 赋值方法 在 uniapp 中,赋值操作可以通过多种方式实现,具体取决于数据类型和场景。 数据绑定赋值 在模板中使用 {{}} 进行数据绑定,通过修改 data 中的值实现动态更新。…

uniapp设置title

uniapp设置title

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

重构uniapp

重构uniapp

重构 Uniapp 项目的关键方法 代码结构优化 将页面、组件、静态资源按功能模块划分,避免全部堆放在根目录。建议采用以下结构: src/ ├── components/ // 通用组件…

uniapp接入

uniapp接入

接入UniApp的基本流程 UniApp是一个基于Vue.js的跨平台开发框架,支持一次开发,多端发布。以下是接入UniApp的基本流程: 环境准备 确保已安装Node.js(建议版本12+)和HB…

uniapp营销

uniapp营销

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