封装uni-app的网络请求

方式一：
使用原生uni.request请求

const BASE_URL = 'http://xxx'export const request = (options) => {//加载loadinguni.showLoading({title:'加载中'})let header = {     "Content-Type": "application/json","Authorization": uni.getStorageSync('token') }console.info(options)return new Promise((resolve, reject) => {uni.request({// 开发者服务器接口地址（请求服务器地址 + 具体接口名）url: BASE_URL + options.url,// 请求方式（若不传，则默认为 GET ）method: options.method || 'GET',// 请求参数（若不传，则默认为 {} ）data: options.data || {},// 请求头（若不传，则默认为 header ）header: options.header || header,// 请求成功success: (res) => {// 此判断可根据自己需要更改if (res.statusCode != 200) {let msg = error.data.message || error.dataif(msg==null || msg==undefined) msg = '服务器异常'uni.showToast({title: msg,icon: 'none'})if(res.statusCode == 401){setTimeout(() => {// 跳转到登录页uni.navigateTo({url: "/pages/login/login"})}, 1000)return}}resolve(res.data)},// 请求失败fail: (err) => {uni.showToast({title: '请求接口失败！',icon: 'none'})reject(err)},//请求结束之后，执行的回调函数（成功或失败都会执行）complete() {//隐藏loadinguni.hideLoading()}})})
}export default {request
}

方式二（推荐使用）：
使用luch-request进行封装（小程序不支持axios），把luch的相关文件放到项目中，如

新建一个js，内容如下：

import Request from '@/utils/luch/index.js'const BASE_URL = 'http://xxx'
const request = new Request();/* 设置全局配置 */
request.setConfig((config) => {config.baseURL = BASE_URLreturn config
})/* 请求以前拦截器 */
request.interceptors.request.use((config) => {config.header["Content-Type"] = "application/json"config.header = {...config.header}// 权限认证config.header.Authorization = uni.getStorageSync("token")return config
})request.interceptors.response.use(async (res) => {/* 请求以后拦截器 */if (res.statusCode != 200) {return Promise.reject(res)}return res.data
}, (error) => { // 请求错误console.log(error)if (error.statusCode == 401) {// 登录态失效则清除token：没有携带token、token没法再刷新let msg = error.data.message || error.dataif(msg==null || msg==undefined) msg = '当前登录状态过期，请重新登录'uni.clearStorageSync()uni.showToast({title: msg,icon: 'none',success() {setTimeout(() => {// 跳转到登录页uni.navigateTo({url: "/pages/login/login"})}, 1000)}})}else{let msg = error.data.message || error.datauni.showToast({title: msg,icon: 'none',duration: 2000})}return Promise.reject(error)
})export {request
}

在main.js中引入

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

使用

//get方法
this.$request.get(url).then(res=>{console.info(res)
})
//put方法
this.$request.put(rul, param).then(res => {console.info(res)
})
//delete方法
this.$request.delete(url, param).then(res => {console.info(res)
})
//post方法
this.$request.post(url,this.param).then(res=>{console.info(res)
})
//上传文件
this.$request.upload(url,{filePath: tempFilePaths[0],name: 'file',
}).then(res => {console.log(res)
})

封装uni-app的网络请求相关推荐

android网络拦截,拦截所有app的网络请求
前提 : 有时会遇到这样的需求:将一些别人app上比较优质的内容,用到自己产品中.由于别人的app做了大量的参数加密, 我们获取不到加密规则,所以使用接口直接调用的方法就走不通. 本文就是要介绍使用逆 ...
android拦截请求数据库,拦截所有App的网络请求并将需要的数据上传到属于你自己的服务器...
前提 : 有时会遇到这样的需求:将一些别人app上比较优质的内容,用到自己产品中.由于别人的app做了大量的参数加密, 我们获取不到加密规则,所以使用接口直接调用的方法就走不通. 本文就是要介绍使用逆 ...
Xamarin.Android之封装个简单的网络请求类
http://doc.okbase.net/catcher1994/archive/220195.html Catcher8 2016/4/23 0:28:50 阅读(72) 评论(0) 一.前言回 ...
Android之封装好的异步网络请求框架
1.简介 Android中网络请求一般使用Apache HTTP Client或者采用HttpURLConnection,但是直接使用这两个类库需要写大量的代码才能完成网络post和get请求,而使 ...
IOS 京东相关app 出现“网络请求失败，请检查您的网络设置”的解决办法
问题情况在IOS系统下,下载安装或者更新新版的京东相关app之后,打开app直接就是"网络请求失败,请检查网络设置",无论是数据连接还是wifi都试了,都是网络请求失败. 然而打 ...
[Error]新用户第一次启动APP时网络请求失败
问题: APP上线后,运营发现很多新用户第一次安装登录时接口请求永远返回失败.遇到这种情况时,需要用户清掉APP重新打开才能正常登录进入APP. 刚开始拿到这个问题时,因为我们所有的测试设备和模拟器都 ...
App防止网络请求被代理抓包的解决方法
1.Android项目代码兼容性设置添加安全配置文件 <?xml version="1.0" encoding="utf-8"?> <net ...
App 组件化/模块化之路——如何封装网络请求框架
App 组件化/模块化之路--如何封装网络请求框架在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库.例如 okhttp retrofit android-asyn ...
android网络请求框架_2020，最新APP重构：网络请求框架
在现在的app,网络请求是一个很重要的部分,app中很多部分都有或多或少的网络请求,所以在一个项目重构时,我会选择网络请求框架作为我重构的起点.在这篇文章中我所提出的架构,并不是所谓的最好的网络请 ...
一步步搭建Retrofit+RxJava+MVP网络请求框架（二），个人认为这次封装比较强大了
在前面已经初步封装了一个MVP的网络请求框架,那只是个雏形,还有很多功能不完善,现在进一步进行封装.添加了网络请求时的等待框,retrofit中添加了日志打印拦截器,添加了token拦截器,并且对Da ...

封装uni-app的网络请求

封装uni-app的网络请求相关推荐

最新文章

热门文章