一、前言
二、创建http.js
三、需要使用的页面中，导入和使用 http

一、前言

在使用 uni-app 开发前端的过程中，uni-app 官方已为我们提供了非常丰富的组件和 API，比如 uni.request 网络请求，如果我们直接在代码中使用会造成较多的冗余，因此一般都会进行封装。之前有介绍过 uni.request 的基础封装，今天介绍另一种封装方式：基于 promise 的封装方式。

二、创建http.js

在项目根路径下新建 commons 文件夹，并创建一个 http.js，内容如下：

const baseUrl = 'http://127.0.0.1:8080/api/'const showToast = (title) => {uni.showToast({title: title,icon: 'none'})
}/**请求接口* @method http* @param {String} url 接口地址* @param {Object} data 接口参数* @param {Object} option 接口配置信息，可选* @return {Object} Promise*/
const http = (url, data = {}, option = {}) => {let hideLoading = option.hideLoading || false // 是否显示 loadinglet hideMsg = option.hideMsg || false // 是否隐藏错误提示let token = '' // 登录鉴权获得的 tokenuni.getStorage({key: 'token',success: (ress) => {token = ress.data}})if (!hideLoading) {uni.showLoading({title: '加载中...',mask: true})}return new Promise((resolve, reject) => {uni.request({url: baseUrl + url,method: option.method || 'POST', // 默认 post 请求header: {'Token': token},data: data,success: res => { // 服务器成功返回的回调函数if (!hideLoading) uni.hideLoading()if (res.statusCode === 200) {let result = res.dataif (result.errcode === '0') {resolve(result)return}reject(result.errmsg)if (!hideMsg) showToast(result.errmsg)} else { // 返回值非 200，强制显示提示信息showToast('[' + res.statusCode + '] 系统处理失败')reject('[' + res.statusCode + '] 系统处理失败')}},fail: (err) => { // 接口调用失败的回调函数if (!hideLoading) uni.hideLoading()if (err.errMsg != 'request:fail abort') {showToast('连接超时，请检查您的网络。')reject('连接超时，请检查您的网络。')}}})})
}
export default http

三、需要使用的页面中，导入和使用 http

<script>import http from '@/commons/http.js'export default {data() {return {}},onLoad() {},methods: {loadData (id) {http('data/get', {id: id}, {hideLoading: false, // 默认 falsehideMsg: true, // 默认 falsemethod: 'POST' // 默认 POST}).then(res => {console.log(res.data)}).catch(err => {console.error(err)})}}}
</script>

uni-app 基于 Promise 的 request 请求封装相关推荐

PHP Request请求封装
/*** Request请求封装* Class Request* @package tool*/ class Request {// curl 请求错误码protected static $list_ ...
微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
微信小程序request请求封装；微信小程序封装request请求；uni-app小程序封装request请求；
本片封装了微信小程序request请求:为别是post get put请求,重点在request.js文件 1.新增四个文件 2.根目录下的utils下的request.js封装uni.request ...
微信小程序wx.request请求封装,和跨域的解决。
建议把所有请求抽离到不同页面对应的js文件中,可以方便后期的修改和排查问题,小程序请求是通过微信后台来请求我们的后台地址来进行后端映射.你请求的接口实际到微信的后端做了一道映射,微信后端拿到你的 wx ...
vue的request请求封装
在目录中创建 utils 文件中创建 request.js request.js 其中已经对axios封装 , token拦截和session存储 import axios from 'axi ...
微信小程序 request请求封装
request 只用 POST ,只封装了 POST ,等有用到 GET 再重写,接口用的 ThinkPHP5.0 主要代码 var apiurl = "xxxxx"; funct ...
uniapp request请求封装
使用luch-request插件 npm i luch-request -S 在根目录的api文件夹下创建一个 service.js /*** @version 3.0.5* @Author lu-c ...
Go 基于原生的HTTP请求封装
//发送HTTP请求 func SendHttpRequest(url,method ,body string,cookies []http.Cookie,headers []map[string]s ...
Taro request 请求封装
在根目录下创建service文件夹再创建 baseUrl文件写入请求地址 baseUrl.js const getBaseUrl = (url) => {let BASE_URL = ''; ...
前端学习（1257）:基于promise处理ajax请求

uni-app 基于 Promise 的 request 请求封装

一、前言

二、创建http.js

三、需要使用的页面中，导入和使用 http

uni-app 基于 Promise 的 request 请求封装相关推荐

最新文章

热门文章