uniapp封装原生uni.request网络请求

最新推荐文章于 2026-04-02 08:08:57 发布

原创最新推荐文章于 2026-04-02 08:08:57 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#uniapp #ajax #vue.js

vue前端同时被 2 个专栏收录

28 篇文章

订阅专栏

uniapp

6 篇文章

订阅专栏

本文详细介绍如何在uniapp中封装原生网络请求，通过创建request.js文件并设置基础URL，实现灵活调用不同子域名的数据请求。文章还展示了如何通过导入封装后的请求模块，在具体页面中发起异步请求获取音乐新歌列表。

uniapp封装原生uni.request网络请求

目录结构：
在这里插入图片描述
首先建立request.js文件

export default function (options) {
  var baseUrl = "https://autumnfish.cn"
  // var baseUrl = "http://musicapi.leanapp.cn"
  return uni.request({
        url: baseUrl+options.url,
		data:options.data||{},
		method:options.method || "GET"
    })
}
三个关键点
1 export default function(options){}
2 var baseUrl = "http://api域名
3 return uni.request({
	url:baseUrl + options.url,
	data: options.data || {}
	method: options.method || "GET"
})

然后建立需要不同数据子域名的文件：

import request from "./request.js"
export function MusicRequest(options) {
    return request(options)
};

3个关键
1 import request from "./request.js"
2 export function MusicRequest(options){}
3 return request(options)

使用

import { HomeRequest } from '../../api/home.js';

	async getNewSong() {
			let result = await HomeRequest({
				url: '/personalized/newsong'
			});
			this.newSong = result[1].data.result;
		},