uniapp api请求接口 封装

这篇具有很好参考价值的文章主要介绍了uniapp api请求接口 封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1,写一个公共的api.js

let baseURL = 'http://443548ef.cpolar.cn/';//公共api地址。示范
export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseURL + options.url, //接口地址:前缀+方法中传入的地址
			method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET”
			data: options.data || {}, //传递参数:传入的参数或者默认传递空集合
			dataType:options.dataType || "json",
			header: {
			   'Admin-Token':uni.getStorageSync('Admin-Token'), //自定义请求头信息
			   'visa':uni.getStorageSync('userId'), //自定义请求头信息
			   'content-type':options.headers['Content-Type'] || 'application/x-www-form-urlencoded;charset=UTF-8'
			},
			success: (res) => {
				if(res.data.code == 302){//用户另一端登录
					uni.showModal({
						title: '提示',
						content: res.data.msg,
						showCancel: false, 
						success: function (res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/login/login'
								});
							} 
						}
					});
				}else if(res.data.code == 500){
					 uni.showToast({
						title: res.data.msg,
						icon: 'none',
						mask: true,
						duration: 2000
					 });
				}else{
					uni.showToast({
						title: res.data.code,
						icon: 'none',
						mask: true,
						duration: 2000
					});
					resolve(res.data);
				}
				//返回的数据(不固定,看后端接口,这里是做了一个判断,如果不为true,用uni.showToast方法提示获取数据失败)
				// if (res.data.success != true) {
				// 	return uni.showToast({
				// 		title: '获取数据失败',
				// 		icon: 'none'
				// 	})
				// }
				// 如果不满足上述判断就输出数据
				
			},
			// 这里的接口请求,如果出现问题就输出接口请求失败
			fail: (err) => {
				console.log( baseURL + options.url)
				console.log(err)
				reject(err)
			}
		})
	})
}

2,接下来一些请求方法封装,以登录为例。login.js

import {myRequest} from 'api.js'
//登录
export function login(username, password) {
  return myRequest({
    url: 'login',
    method: 'post',
    data: {
      username,
      password
    },
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'  
	}
  })
}

3,login.vue 点击发送请求

import {login} from '@/api/login.js';

loginHandle(){
				login(this.username,this.password).then(res => {
									const code = res.code;
									if (code == 0) {
										uni.showToast({
											title: '登录成功'
										})
									
										setTimeout(() => {
										      uni.redirectTo({
										          url: '/pages/index/index',
												  })
										  }, 500)
									} else {
										uni.showToast({
											title:res.msg,
											icon: 'none',
											mask: true,
											duration: 2000
										})
										
									}
								}).catch(err => {
									console.log(err)
								})
			},

文章来源地址https://www.toymoban.com/news/detail-660925.html

到了这里,关于uniapp api请求接口 封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue Node.js + Express + MongoDB 构建的后端服务API接口

    构建一个使用 Vue.js 作为前端, Node.js + Express + MongoDB 作为后端服务的全栈应用涉及到多个步骤。这里简要概述整个过程,并提供一些基本的代码示例来帮助你开始。 安装 MongoDB: 根据你的操作系统从 MongoDB 官网 下载并安装 MongoDB。 启动 MongoDB 服务: 安装完成后,根据 MongoDB 的

    2024年04月14日
    浏览(55)
  • 前端uniapp封装网络请求详情教程

    1,common文件夹下http.api.js,定义接口 2,common文件夹下http.interceptor.js,请求封装 3,全局数据定义 store文件夹下index.js 注意:vuex的使用前要先导入vuex(npm i vuex),在该方法中还需导入vuex-persistedstate(npm i vuex-persistedstate) 4,main.js中声明(例子中用的比较杂,挑有用的使用) 5,接

    2024年02月02日
    浏览(39)
  • uniapp 微信小程序请求拦截器 接口封装

    前言: 请求拦截器可以在我们需要传递请求头的时候使用,例如:token 也会在当token发生变化的时候给予响应,所以我们做好对应的判断即可 1.首先在根目录创建common文件夹, 在里面创建request.js文件并加入以下代码: 2,在common文件夹下接着新建一个example.js文件来当作接口

    2024年01月23日
    浏览(49)
  • js异步请求接口\模拟异步封装

    2024年01月16日
    浏览(33)
  • uniapp 前端定时刷新token,接口排队等待,promise 接口封装

           此项目为小程序。小程序完成第一版token刷新设计思路是:根据接口调用返回的errorCode来判断当前用户的token和refreshToken是否过期。根据不同的errorCode,前端去调用接口完成token的刷新或者跳转到登录页面重新登录。        由于小程序的用户功能权限可以在后台管理

    2024年02月09日
    浏览(76)
  • uniapp开发笔记(1)——uview API接口请求

    在请求后端的时候,需要带请求头去访问,在uview里写了http请求可以传递的参数:详情参考:Http请求 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 实战代码示例:  在项目中,请求接口的时候,要做的是渲染列表,有的时候要给后台发一个参数,在点击某个数据的

    2024年02月17日
    浏览(39)
  • Vue 封装ajax请求[接口]函数

             在Vue项目开发当中,当有了后端提供的数据接口之后呢,就需要来为接口定义接口的请求函数,那么在去定义接口函数之前可以先来封装一个ajax请求函数;可能有的初学者在之前的一些篇目当中看到这个vue发起数据请求的不是使用axios的吗?这个确实没有问题,在

    2024年02月08日
    浏览(40)
  • vue3 封装api接口

    新建axiosj.ts 新建状态码文件: 导出案例    export function login  (params) {      return request(\\\'/admin-api/system/auth/login\\\',params, \\\'post\\\')    } 使用  

    2024年02月16日
    浏览(32)
  • 前端api接口请求错误问题解决方法

    最近我在群里看到很多同学在跟着视频写项目的时候,经常遇到一些关于资源请求API接口出现错误的问题,并在群里咨询。在这里,我想给大家分享一些解决这个问题的思路。 首先,我们需要对错误进行排查。这需要大家对HTTP请求有一定的了解。我在这里简单介绍一下,如

    2024年01月22日
    浏览(47)
  • nuxt3 useFetch封装一个api接口http请求 - 解决刷新页面useFetch无返回

    项目中封装接口请求,并且解决刷新页面useFetch无返回数据问题 刷新页面useFetch无返回数据问题: 浏览器刷新的时候页面没有显示数据,接口data无返回。本身nuxt的useFetch在参数不变的情况下,数据是不会重新从后台接口去请求数据的,会直接拿上一次的结果。但是有实时去后

    2024年02月11日
    浏览(78)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包