uni-app 请求封装
1.创建一个http.js
const baseUrl = 'http://192.168.1.188:8080';
const httpRequest = (opts, data) => {
let httpDefaultOpts = {
url: baseUrl+opts.url,
data: data,
method: opts.method,
header: opts.method == 'get' ? {
'X-Requested-With': 'XMLHttpRequest',
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
} : {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
dataType: 'json',
}
let promise = new Promise(function(resolve, reject) {
uni.request(httpDefaultOpts).then(
(res) => {
resolve(res[1])
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
};
//带Token请求
const httpTokenRequest = (opts, data) => {
let token = "";
uni.getStorage({
key: 'token',
success: function(ress) {
token = ress.data
}
});
//此token是登录成功后后台返回保存在storage中的
let httpDefaultOpts = {
url: baseUrl+opts.url,
data: data,
method: opts.method,
header: opts.method == 'get' ? {
'Token': token,
'X-Requested-With': 'XMLHttpRequest',
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
} : {
'Token': token,
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
dataType: 'json',
}
let promise = new Promise(function(resolve, reject) {
uni.request(httpDefaultOpts).then(
(res) => {
resolve(res[1])
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
}; export default {
baseUrl,
httpRequest,
httpTokenRequest
}
2.将http.js引入
import http from '@/components/utils/http.js';
let opts={
                        url: '/api/device/add',
                        method: 'post'
                    };
                    let param={
                        deviceId:this.deviceCode,
                        deviceName:this.deviceName
                    };
                    http.httpTokenRequest(opts, param).then(res => {
                        console.log(res.data);
                       //打印请求返回的数据
                    },error => {console.log(error);}) 
uni-app 请求封装的更多相关文章
- uniapp 基于 flyio 的 http 请求封装
		
之前写请求都是用别人封装好的,直接 import request 完事,自己第一次写还是一头雾水,学习了一波搞清楚了些,可以写简单的封装了. 首先要搞清楚为什么封装请求,同其他的封装一样,我们把不同请 ...
 - angular cli http请求封装+拦截器配置+ 接口配置文件
		
内容:接口配置文件.http请求封装 .拦截器验证登录 1.接口配置文件 app.api.ts import { Component, OnInit } from '@angular/core'; / ...
 - Flutter 实际开发常用工具类(全局提示,请求封装,token缓存,验证码倒计时、常用窗帘动画及布局)
		
介绍: 一星期从入门到实际开发经验分享及总结 代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...
 - 微信小程序request(ajax)接口请求封装
		
微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...
 - drf:restful概念,类继承关系,drf请求封装,drf请求流程,版本控制组件,认证组件(token),权限组件
		
1.restful规范 resfful规范的概念最重要: 是一套规范,规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的就是,以前写增删改查的时候需要些四个视图寒素,rest ...
 - flutter dio网络请求封装实现
		
flutter dio网络请求封装实现 文章友情链接: https://juejin.im/post/6844904098643312648 在Flutter项目中使用网络请求的方式大致可分为两种 ...
 - 十. Axios网络请求封装
		
1. 网络模块的选择 Vue中发送网络请求有非常多的方式,那么在开发中如何选择呢? 选择一:传统的Ajax是基于XMLHttpRequest(XHR) 为什么不用它呢?非常好解释配置和调用方式等非常混 ...
 - uni-app(二)接口请求封装,全局输出api
		
在项目 main.js 同级创建 utils 文件夹, utils里创建 config.js文件,存储重要参数 // 获取平台信息 const { system, } = uni.getSystemI ...
 - iOS开发——post异步网络请求封装
		
IOS中有许多网络请求的函数,同步的,异步的,通过delegate异步回调的. 在做一个项目的时候,上网看了很多别人的例子,发现都没有一个简单的,方便的异步请求的封装例子.我这里要给出的封装代码,是异 ...
 - WebApi系列~基于单请求封装多请求的设计
		
回到目录 怎么说,单请求封装多请求,这句话确实有点绕了,但还是要看清楚,想明白这到底是怎么一回事,单请求即一次请求(get,post,put,delete),封闭多请求,即在客户端发送的一个请求中可能 ...
 
随机推荐
- uboot学习之uboot.bin的运行流程
			
上篇博客:http://www.cnblogs.com/yeqluofwupheng/p/7347925.html 讲到uboot-spl的工作流程,接下来简述一下uboot.bin的工作流程,这对应 ...
 - 【linux】【jenkins】自动化运维二   安装插件
			
gitlab安装教程参考:https://www.cnblogs.com/jxd283465/p/11525629.html 1.Maven Integration Plugins Jenkins安装 ...
 - ##发送post时,设置了utf-8,中文还是乱码?
			
发送post时,设置了utf-8,中文还是乱码? 我们用HttpUrlConnection或HttpClient发送了post请求,其中有中文,虽然我们两边都设置了utf-8,但还是乱码? 我们在re ...
 - RxSwift 中的调度器
			
与 ReactiveCocoa 相比,Rx 的一大优势就是更丰富的并发模型.提到并发,就不得不提多线程.在 RxSwift 中,与线程对应的概念就是调度器,本文就调度器做些介绍,包括并发调度器.串行调 ...
 - Mysql高手系列 - 第14篇:详解事务
			
这是Mysql系列第14篇. 环境:mysql5.7.25,cmd命令中进行演示. 开发过程中,会经常用到数据库事务,所以本章非常重要. 本篇内容 什么是事务,它有什么用? 事务的几个特性 事务常见操 ...
 - 敏捷测试--之scrum--原理
			
Scrum 是一个用于开发和维持复杂产品的框架 ,是一个增量的.迭代的开发过程.在这个框架中,整个开发过程由若干个短的迭代周期组成,一个短的迭代周期称为一个Sprint,每个Sprint的建议长度是2 ...
 - 数据结构与算法(C/C++版)【排序】
			
第八章<排序> 一.直接插入排序 //直接插入排序 //算法思想:每趟将一个待排的关键字按照其值的大小插入到已经排好的部分有序序列的适当位置上,直到所有待排关键字都被插入到有序序列中为 ...
 - 【IT技术概念】WebAPI与传统的WebService有哪些不同?
			
在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我分享一下我对 ...
 - Python  celery和Redis入门安装使用(排难帖)
			
1.redis安装 下载地址 https://github.com/MicrosoftArchive/redis/releases,选择Redis-x64-3.2.100.msi5.8 MB下载就好了 ...
 - _self.$scopedSlots.default is not a function报错
			
问题: 当同一页面有elementUI的多个table表格时,如果用到v-if来动态展示表格,切换时出现如下报错: 原因: 是因为表格是element-ui通过循环产生的,而vue在dom重新渲染时有 ...