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 请求封装的更多相关文章

  1. uniapp 基于 flyio 的 http 请求封装

    之前写请求都是用别人封装好的,直接 import request 完事,自己第一次写还是一头雾水,学习了一波搞清楚了些,可以写简单的封装了. 首先要搞清楚为什么封装请求,同其他的封装一样,我们把不同请 ...

  2. angular cli http请求封装+拦截器配置+ 接口配置文件

    内容:接口配置文件.http请求封装 .拦截器验证登录 1.接口配置文件 app.api.ts import { Component, OnInit } from '@angular/core'; / ...

  3. Flutter 实际开发常用工具类(全局提示,请求封装,token缓存,验证码倒计时、常用窗帘动画及布局)

    介绍: 一星期从入门到实际开发经验分享及总结           代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...

  4. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  5. drf:restful概念,类继承关系,drf请求封装,drf请求流程,版本控制组件,认证组件(token),权限组件

    1.restful规范 resfful规范的概念最重要: 是一套规范,规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的就是,以前写增删改查的时候需要些四个视图寒素,rest ...

  6. flutter dio网络请求封装实现

    flutter dio网络请求封装实现 文章友情链接:   https://juejin.im/post/6844904098643312648 在Flutter项目中使用网络请求的方式大致可分为两种 ...

  7. 十. Axios网络请求封装

    1. 网络模块的选择 Vue中发送网络请求有非常多的方式,那么在开发中如何选择呢? 选择一:传统的Ajax是基于XMLHttpRequest(XHR) 为什么不用它呢?非常好解释配置和调用方式等非常混 ...

  8. uni-app(二)接口请求封装,全局输出api

    在项目 main.js 同级创建 utils 文件夹, utils里创建 config.js文件,存储重要参数 // 获取平台信息 const { system, } = uni.getSystemI ...

  9. iOS开发——post异步网络请求封装

    IOS中有许多网络请求的函数,同步的,异步的,通过delegate异步回调的. 在做一个项目的时候,上网看了很多别人的例子,发现都没有一个简单的,方便的异步请求的封装例子.我这里要给出的封装代码,是异 ...

  10. WebApi系列~基于单请求封装多请求的设计

    回到目录 怎么说,单请求封装多请求,这句话确实有点绕了,但还是要看清楚,想明白这到底是怎么一回事,单请求即一次请求(get,post,put,delete),封闭多请求,即在客户端发送的一个请求中可能 ...

随机推荐

  1. JSP常规内容

    1.forword和redirect的区别? forword是服务器请求资源,服务器直接读取URL,把目标地址URL响应读取出来,然后再把这些内容发送给浏览器.(特点是url和request sess ...

  2. JavaScript学习记录

    js整理笔记 1.数据类型 2.基本语法 3.js运算符 4.条件语句 5.类型转换 6.函数 7.预编译 8.作用域 9.闭包 10.对象创建方法 11.this 12.dom操作 13.事件 14 ...

  3. QTP8.2--安装流程

    一.安装说明: 1.进入安装文件夹,运行QTP8.2安装文件setup,进入安装向导后直接单击“QuickTest Professional 安装”选项,由于破解文件存在缺陷,所以请不要改变安装路径c ...

  4. 使用Espresso测试记录

    准备工作 建立测试项目 添加测试依赖 编写Espresso测试 运行测试并检查测试结果 建立测试项目 使用Android Studio建立测试项目,Activity模版使用 LoginActivity ...

  5. 使用freemarker做邮件发送模板

    1.解析工具类 package com.example.springbootfreemarker.utils; import freemarker.template.Configuration; im ...

  6. Docker系列(一):容器监控工具Weave Scope安装

    项目进行容器化之后,配套的基础设施包括监控.编排.管理等都需要进行一并完善.这里也是自己一边学习一边进行记录. Weave Scope 的最大特点是会自动生成一张 Docker 容器地图,让我们能够直 ...

  7. Shell之命令执行的判断依据

    目录 Shell之命令执行的判断依据 参考 Shell之命令执行的判断依据

  8. MariaDB简单操作

    RHEL7之后操作系统带的数据库都是mariadb,跟mysql一样用 1.安装客户端和服务端 [root@localhost ~]# yum install mariadb mariadb-serv ...

  9. python2和3区别

    核心类差异 Python3对Unicode字符的原生支持 Python2中使用 ASCII 码作为默认编码方式导致string有两种类型str和unicode,Python3只支持unicode的st ...

  10. Ng项目安装到指定盘符

    全局安装 1.node.js 2.cnpm 3.typeScript 4.ng-cli 指定安装: 1.首先在想要的盘符内新建一个名字 例: D盘中新建一个angualr的文件夹 2.在开始菜单中输入 ...