uni-app 项目封装http 和url

需求分析：
封装http请求和url请求，蛀牙目的还是为了统一管理

将这两个部分放在http文件夹下面
http/http.js

//路由公共的部分：
const baseUrl = 'http://172.0.0.1:8080';
//不带token的封装
const httpRequest = (opts, data) => {  //opts 是一个对象，包含了后面的url,方法，请求头设置，返回的数据类型等//1.请求的一些默认信息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',}//2.封装promisereturn new Promise((resolve, reject)=>{uni.request(httpDefaultOpts).then((res) => {resolve(res[1])}).catch((response) => {reject(response)})})
};
//带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',}return  new Promise(function(resolve, reject) {uni.request(httpDefaultOpts).then((res) => {resolve(res[1])}).catch((response) => {reject(response)})})
};export default {baseUrl,httpRequest,httpTokenRequest
}

在main.js中全局挂载

import Vue from 'vue'
import App from './App'
import myRequest from './http/http.js'Vue.prototype.$http = myRequest
Vue.config.productionTip = false
App.mpType = 'app'const app = new Vue({...App
})
app.$mount()

在页面中使用

let opts = {url: '/api/add',method: 'post'
};
let param = {deviceId: this.deviceCode,deviceName: this.deviceName
};
this.$myRequest.httpTokenRequest(opts, param).then(res => {console.log(res.data);//打印请求返回的数据}, error => {console.log(error);
})

uni-app 项目封装http 和url相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
在uni-app的app项目中使用live-pusher实现人脸识别
在uni-app的app项目中使用live-pusher实现人脸识别前言一.环境二.使用步骤三.permission.js源代码四.face.vue源代码五.代码效果总结前言在uni ...
vue后台管理、APP项目总结集合
文章目录后台管理界面 APP 项目整体总结别慌,内容看起来多,其实都是一些小干货啦后台管理界面搭建一个vue项目: 配置相应的环境,如安装node,vue,webpack(最好安装一下淘宝镜像 ...
uniapp网络请求封装；小程序请求接口封装；uni.request接口封装
另一篇全面封装文章资源文章下载地址 1.正常使用uni.request()发送请求(未封装) get() {uni.request({url: 'http://192.168.1.191/abc// ...
uni app 调用网络打印机_uni-app 的使用体验总结
[实践] uni-app 的使用总结最近使用 uni-app 的感受. 使用体验没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和小程序结合的感觉.写类似小程序的标签,有着小程 ...
Vue2-搭建书写健身app项目
前言:第一个健身APP项目是用webpack+原生JS写的,具体怎么写得已经快忘光了, 最近刚学习完Vue2的理论知识,决定用Vue2从头至尾,重新写一下健身APP,故在此记录整理. 使用的技术:No ...
电影天堂APP项目开发之Python爬虫篇，共18课时/5时33分
电影天堂APP项目开发之Python爬虫篇,共18课时/5时33分,是电影天堂APP项目开发课程的第一篇章,讲解使用requests和bs4库,爬取和解析电影天堂网站数据,并讲数据保存到SQLite数 ...
如何开发出一款仿映客直播APP项目实践篇 -【服务器搭建+推流】
如何开发出一款仿映客直播APP项目实践篇 -[原理篇] 如何开发出一款仿映客直播APP项目实践篇 -[采集篇 ] 如何开发出一款仿映客直播APP项目实践篇 -[服务器搭建+推流] 如何开发出一款仿映客 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...

uni-app 项目封装http 和url

uni-app 项目封装http 和url相关推荐

最新文章

热门文章

uni-app 项目 封装http 和url

uni-app 项目 封装http 和url相关推荐

最新文章

热门文章

uni-app 项目封装http 和url

uni-app 项目封装http 和url相关推荐