uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

另一篇全面封装文章

资源文章下载地址

1.正常使用uni.request()发送请求(未封装)

get() {uni.request({url: 'http://192.168.1.191/abc//main/jiekouming/abclist?workType=2',data: {},header: {Token: 'b042b36fwq909qwe9iiidsai2323sd232dw3'},method: 'GET',success: (res) => {if (res.statusCode !== 200) {return uni.showToast({title: '获取数据失败',icon: "none",mask: true,})}console.log(res);this.arrType = res.data.data},fail: (error) => {uni.showToast({title: '请求接口失败',})console.log(error);}})},

但是一个项目内多次请求，太过麻烦，所以我们需要封装uni.request()

2.封装接口（在aop文件夹下席间index.js） ，下方的封装api可直接复制，修改接口状态码即可使用

封装api：

// switch (process.env.NODE_ENV) {//   case 'development'://     // 公共的地址开发//     baseUrl = 'http://192.168.1.191/abc/'//     break//   case 'test'://     baseUrl = 'https://test.epen.ltd/'//     break//   case 'production'://     baseUrl = 'https://production.epen.ltd/'//     break//   default://     baseUrl = 'https://default.epen.ltd/'// }// console.log('baseUrl', baseUrl)
// 公共地址// 接口共用地址
const BASE_URL = 'http://192.168.1.191/abc/'
// 获取储存的token 设置token请求头
const token = uni.getStorageSync('token_key_name')export const myRequest = (options) => {// 调接口加载uni.showLoading({title: "加载中",mask: true,});return new Promise((resolve, reject) => {uni.request({url: BASE_URL + options.url,//默认参数data: options.data || {},// 配置请求头参数-例如tokenheader: {Token: 'b042b36fwq909qwe9iiidsai2323sd232dw3'// Accept: 'application/json',// 'Content-Type': 'application/json',// 'X-Requested-With': 'XMLHttpRequest'},method: options.method || 'GET',// sslVerify: true,// 接口请求成功success: (res) => {// 关闭加载uni.hideLoading();console.log('接口所有参数', res);if (res.statusCode !== 200) {// 不同报错信息的提示和配置if (res.statusCode == 500) {return uni.showToast({title: '服务器重启中...',icon: "none",mask: true,})} else {return uni.showToast({title: '获取数据失败',icon: "none",mask: true,})}}// 调用成功且有数据 返回数据  组件内通过 .then() 或者async await 接受异步返回数据//resolve(res.data)//在接口200 调用成功后 才能进行判断接口内的状态码 return_code 以此判定作何操作和提示const { statusCode, data } = reslet return_code = res.data.return_codelet return_message = res.data.return_messageswitch (return_code) {case '0':// 成功的数据data状态码  则直接返回数据resolve(res.data)breakcase '4011':uni.clearStorage()if (hasUserInfo && !isExisited && !checkToken) {isExisited = trueuni.showModal({title: '提示',content: '身份失效，请重新登录！',complete: () => {uni.reLaunch({ url: '/pages/index/index' })},})} else {reject(res.data)}breakdefault:// 其他的如无特定要求 则做提示// reject(res.data)return uni.showToast({title: return_message || '请求失败',duration: 2000,icon: 'none',})}},// 接口接口失败fail: (error) => {// 关闭加载uni.hideLoading();console.log(2, error);uni.showToast({title: '请求接口失败',icon: "none",mask: true,})// 失败数据reject(error)}})})
}

3.引入挂载，在入口文件main.js引入，挂在到全局使用：

// 引入封装的接口api
import { myRequest } from './pages/api/index.js'
// 挂在Vue属性 全局通过this.$myRequest()可以访问到
Vue.prototype.$myRequest = myRequest

4.使用：直接在组件内，在方法内通过this.$myRequest()即可：
注意：有两种获取参数方式：
①通过 async await 拿到异步数据
②通过 .then()拿到异步数据

async await：

async getType() {const res = await this.$myRequest({url: 'aaa/bbb/list?workType=2',})console.log('使用async await获取返回的参数', res);this.arrType = res.data},

.then()：

postType() {// const res =  this.$myRequest({//   url:'question/abc/jiekouming',//   method:'POST',//   data:{//     chapterIds:[22394],//     knowledgeIds:[13269, 13271, 14118]//   }// })// console.log('直接获取拿不到异步结果',res);this.$myRequest({url: 'question/abc/jiekouming',method: 'POST',data: {chapterIds: [22394],knowledgeIds: [13269, 13271, 14118]}}).then(res => {console.log('使用.then()获取返回的参数', res);this.qType = res.data})},

5.请求结果模拟：
①请求成功：

②获取失败：

接口访问成功200 数据状态码是错误的提示

③结果请求失败：

④服务器500：

uniapp网络请求封装；小程序请求接口封装；uni.request接口封装相关推荐

实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie
实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie 1-使用npm install axios;命令安装axios 2-新建一个文件夹再建一个.js后缀文件 ...
uniapp使用网易有道词典接口做一个背单词小程序-单词发音-有道词典接口-不用注册token直接发请求
uniapp使用网易有道词典接口做一个背单词小程序(不用注册token直接发请求) uniapp使用网易有道词典接口做一个背单词小程序-单词发音-有道词典接口用到的接口: *1.获取单词发音(goo ...
微信小程序请求及封装请求方式
一.微信小程序请求实现方式小程序发起网络请求需用到 wx.request(Object object) 例如:wx.request({url: 'test.php', //仅为示例,并非真实的接口 ...
【微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求
微信小程序请求封装(拦截器):处理请求过期–重新登录–重新发起刚才过期的请求 env.js //这里使用的接口呢都是自己模拟的,可以根据自己的需求进行添加module.exports={//开发环境的 ...
过去别人小程序接口php,小程序请求API接口PHPSESSID变化的解决方式
搜索热词惠民小程序小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈小程序请求API接口PHPSESSID变化的解决方式. 最新消息, 4月18日,腾讯在北京召开发布会,宣布将腾讯文档作为 ...
微信小程序请求函数同步封装方法
微信小程序请求函数同步封装方法距上回说到,我们使用微信小程序请求函数时,需要多次调用,之前我们封装了一套代码,但是他是异步的,当我们下一个请求函数需要的数据是上一个请求函数得到的时候,就不可以了 ...
微信小程序的网络请求 —— 微信小程序教程系列（14）
网络请求,基本上是必须的环节之一. 小程序提供了wx.request(object),与开发者的服务器实现数据交互的一个很重要的api. 最简单的用法如下(以GET请求为例) <view bin ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
嘿！不备案不要HTTPS！小程序请求任意网站黑科技来了！
顶着被"封"的危险我要偷偷告诉你一个目前还没"公布"的黑科技! 方法原创研发,并在实际项目中得到了很好的使用体验! 好!认真往下看! 我将会告诉你一个非常好玩 ...

uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

uniapp网络请求封装；小程序请求接口封装；uni.request接口封装相关推荐

最新文章

热门文章