uni-app请求后台接口方法封装

最新推荐文章于 2025-05-08 23:17:56 发布

原创最新推荐文章于 2025-05-08 23:17:56 发布 · 3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #小程序

前端同时被 3 个专栏收录

3 篇文章

订阅专栏

html

3 篇文章

订阅专栏

面试

3 篇文章

订阅专栏

本文介绍了uni-app中如何封装和使用后台接口的方法，包括新建api和util文件夹，封装缓存、请求和环境变量，以及在main.js中的全局配置。详细阐述了在各平台运行时网络API的配置，提供了uni.request方法的参数说明和使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

uni-app中方法整理之请求后台接口。个人封装版本与官方提供方法。

官方入口：

封装版本：目录见下

1、新建文件夹api，这里主要放接口信息

login.js 放登录页面的接口方法

import axios from '../util/http'
const Login = {
	 // 获取验证码
	goPhoneCode(params) {
	  return axios({
		method:'get',
		url:`/phoneCode`,
		params:params
	  })
	},
}
export default Login

index.js 注册所有的接口方法

/**
 * api接口的统一出口
 */
import common from './common'
import login from './login'

export default {
  common,
  login,
}

2、新建util文件夹，并新建三个文件

auth.js 封装的缓存方法

const TokenKey = 'uni_token';

// 认证令牌
export function getToken() {
	return uni.getStorageSync(TokenKey)
}

export function setToken(token) {
	return uni.setStorageSync(TokenKey, token)
}

export function removeToken() {
	return uni.removeStorageSync(TokenKey)
}

http.js 封装的请求接口方法

import {getToken,removeToken} from './auth';
import env from './env';


// 封装数据返回成功提示函数------------------------------------------------------
function successState(res) {
  let code = res.data.code;
	console.log('@return-data:')
	console.log(res)
	//公共报错提醒
	if(code !== 200){
		// 非成功状态码弹窗
		uni.showToast({
			icon: 'none',
			duration: 3000,
			title: `${res.data.msg}`
		});
	}
  // 登陆失效
  if (res.data.code === 403) {
  	// 清除本地token
  	removeToken()
  	// 关闭所有页面返回到登录页
  	uni.reLaunch({
  		url: '/pages/login/login'
  	})
  }
  console.log('/------http(END)------/')
	
  return res
}
// 封装数据返回失败提示函数------------------------------------------------------
function errorState(err) {
  // 请求失败弹窗
  uni.showToast({
  	icon: 'none',
  	duration: 3000,
  	title: '服务器错误,请稍后再试'
  });
  console.log('/------http(END)------/')
}


// 封装axios---------------------------------------------------------------------
function service(options = {}) {
	options.url = `${env.baseUrl}${options.url}`;
	// 判断本地是否存在token，如果存在则带上请求头
	if (getToken()) {
		options.header = {
			'content-type': 'application/json',
			'authorization': `${getToken()}`	// 这里是token
		};
	}
	console.log('/------http(START)------/')
  console.log('@all-url:')
  console.log(options.url)
  console.log('@params:')
  console.log(options)
	
	return new Promise((resolved, rejected) => {
		options.success = (res) => {
			successState(res)
			resolved(res)
		};
		options.fail = (err) => {
			errorState(err)
			rejected(err);
		};
		uni.request(options);
	});
}

export default service;v

env.js 公共baseurl 地址与其他变量

"use strict";
/**
 * 	appid : 		小程序appid
 *  baseUrl : 		服务端域名
 */
export default {
	appid: '****',
	baseUrl: 'http://***.70.94.135:7001'
}

3、main.js中全局配置

//接口
import api from './api'
Vue.prototype.$api = api

4、页面中具体使用

mounted() {
		this.getLoginCap()
	},
	methods: {
		//获取验证码
		getLoginCap(){
			let phone = '13519102731'
			this.$api.login.goPhoneCode({phone}).then(res=>{
					debugger
				if(res.data.code == 200){
				}
			})
		}
	}

打开 f12 的console.log，可以看到具体的地址，参数和返回值

官方提供方法：点我直接进入

uni.request(OBJECT)

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

OBJECT 参数说明

参数名

类型

必填

默认值

说明

平台差异说明

url

String

是

开发者服务器接口地址

data

Object/String/ArrayBuffer

否

请求的参数

App不支持ArrayBuffer类型

header

Object

否

设置请求的 header，header 中不能设置 Referer。

App、H5端会自动带上cookie，且H5端不可手动修改

method

String

否

GET

有效值详见下方说明

timeout

Number

否

60000

超时时间，单位 ms

H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序

dataType

String

否

json

如果设为 json，会尝试对返回的数据做一次 JSON.parse

responseType

String

否

text

设置响应的数据类型。合法值：text、arraybuffer

支付宝小程序不支持

sslVerify

Boolean

否

true

验证 ssl 证书

仅App安卓端支持（HBuilderX 2.3.3+），不支持离线打包

withCredentials

Boolean

否

false

跨域请求时是否携带凭证（cookies）

仅H5支持（HBuilderX 2.6.15+）

firstIpv4

Boolean

否

false

DNS解析时优先使用ipv4

仅 App-Android 支持 (HBuilderX 2.8.0+)

success

Function

否

收到开发者服务器成功返回的回调函数

fail

Function

否

接口调用失败的回调函数

complete

Function

否

接口调用结束的回调函数（调用成功、失败都会执行）

method 有效值

注意：method有效值必须大写，每个平台支持的method有效值不同，详细见下表。

method

App

微信小程序

支付宝小程序

百度小程序

字节跳动小程序、飞书小程序

GET

√

POST

√

PUT

√

DELETE

√

CONNECT

√

HEAD

√

OPTIONS

√

TRACE

√

success 返回参数说明

参数

类型

说明

data

Object/String/ArrayBuffer

开发者服务器返回的数据

statusCode

Number

开发者服务器返回的 HTTP 状态码

header

Object

开发者服务器返回的 HTTP Response Header

Array.<string>

开发者服务器返回的 cookies，格式为字符串数组

data 数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

对于GET方法，会将数据转换为 query string。例如{ name: 'name', age: 18 }转换后的结果是name=name&age=18。
对于POST方法且header['content-type']为application/json的数据，会进行 JSON 序列化。
对于POST方法且header['content-type']为application/x-www-form-urlencoded的数据，会将数据转换为 query string。