uniapp封装request请求简洁明了（使用Promise封装）

1、baseUrl为服务器请求地址
2、uni.request(OBJECT) 发起网络请求
3、uni.showToast(OBJECT) 显示消息提示框

第一步在utils文件下创建 request.js文件、封装promise 直接上代码

const baseUrl = 'https://xxxxxxxx.com'; //服务器请求地址//封装 Promise组件
export function request(options) {return new Promise((resolve, reject) => {uni.request({url: baseUrl + options.url,data: options.data || {},method: options.method,header: {'Content-Type': 'application/json;charset=UTF-8',},success(res) {const data = res.data || res;//switch根据项目返回的code判断switch (data.code) {case '200':resolve(data.data);break;case '500':uni.showToast({title: data.message,icon: "none",});reject(false);break;case '400':uni.showToast({title: data.message,icon: "none",});//跳转到登录页面reject(false);break;default:reject(false);break;}},fail(res) {// 失败处理reject(res);}});});
}

第二步创建 api.js文件、接口统一管理

//接口统一管理
import { request } from '../utils/request.js'export  function bsSendVerifyCode(data){ // 登录验证码return request({url:'/businessAuth/bsSendVerifyCode',method: 'post',data})
}

第三步在main.js文件下引入

import { request } from './utils/request.js'
Vue.prototype.request = request

第四步在页面中引用接口

 import { bsSendVerifyCode } from "@/api/index.js"methods: {//获取验证码async postVerifyCode() {let data = {mobile: this.form.mobile}const res = await bsSendVerifyCode(data)if(res.code==200){uni.showLoading({title: '验证码发送成功',mask: true})}else{uni.showLoading({title: '获取验证码失败',mask: true})}},}

成功获取后台数据，简单明了！！！
大家需要根据后台返回数据做一下相应的修改，加油加油！！！

uniapp封装request请求简洁明了（使用Promise封装）相关推荐

小程序基础开发（三）：授权，获取用户信息，注册，登录，简单封装request请求
一,授权 1,首先在app.js里检测用户是否授权 // 查看是否授权wx.getSetting({success: function (res) {if (res.authSetting['scop ...
小程序简单封装 request 请求
我在这里做了详细的介绍 : 小程序简单封装 request 请求转载于:https://www.cnblogs.com/biangz/p/9984340.html
uniapp：request 请求出现400错误
uniapp:request 请求出现400错误开发需求:我们团队在使用 uniapp springboot 开发微信小程序项目,前端向后端发送request 请求时,前端爆出400错误. 400错 ...
微信小程序request请求封装；微信小程序封装request请求；uni-app小程序封装request请求；
本片封装了微信小程序request请求:为别是post get put请求,重点在request.js文件 1.新增四个文件 2.根目录下的utils下的request.js封装uni.request ...
微信小程序封装request请求，primise队列化，async await做同步处理，缓存token信息
话不多数直接上代码! 在app.js文件中加入,一般新建的项目都有globalData只需要在里面添加你的信息就行了 globalData: {Ip:'',Header:{ //request 请求头 ...
微信小程序封装request请求数据
遇到问题不要慌做项目离不开请求数据 1.为什么要封装api去请求接口数据做微信小程序的时候请求数据的时候会多次用到wx.request请求,如果每次都去写一遍 wx.request({url: ' ...
用promise封装ajax_vue实践---vue结合 promise 封装原生ajax
有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法方法一,在单个页面内使用封装的代码如下: beforeCreate () { this.$http = (() => ...
vue中封装ajax请求方法,Vue如何封装ajax
Vue如何封装ajax 发布时间:2020-12-07 11:09:07 来源:亿速云阅读:123 作者:小新这篇文章主要介绍Vue如何封装ajax,文中介绍的非常详细,具有一定的参考价值,感兴趣 ...
小程序promise封装post请求_Promise封装微信小程序的Request请求
回调地狱一向是影响开发和维护的症结所在,无数个success()的嵌套再嵌套,导致代码层级颇深,盘一次逻辑都要费劲千辛万苦,ES6语法中的Promise,便是专为解决JS中异步请求回调的信任问题而存在 ...
Java-Web Response响应和Request请求
一.请求响应流程图二.response概述 response是Servlet.service方法的一个参数,类型为javax.servlet.http.HttpServletResponse.在客户 ...

uniapp封装request请求简洁明了（使用Promise封装）

uniapp封装request请求简洁明了（使用Promise封装）

第一步在utils文件下创建 request.js文件、封装promise 直接上代码

第二步创建 api.js文件、接口统一管理

第三步在main.js文件下引入

第四步在页面中引用接口

uniapp封装request请求简洁明了（使用Promise封装）相关推荐

最新文章

热门文章

uniapp封装request请求简洁明了（使用Promise封装）

uniapp封装request请求简洁明了（使用Promise封装）

第一步 在utils文件下创建 request.js文件、封装promise 直接上代码

第二步创建 api.js文件、接口统一管理

第三步在main.js文件下引入

第四步在页面中引用接口

uniapp封装request请求简洁明了（使用Promise封装）相关推荐

最新文章

热门文章

第一步在utils文件下创建 request.js文件、封装promise 直接上代码