-
uniapp request封装
2021-02-27 16:29:20uniapp request封装 const baseUrl = 'http://xxxxxx'; //后台域名 const httpRequest = (opts, data) => { let httpDefaultOpts = { url: baseUrl + opts.url, data: data, method: opts.method, ...uniapp request封装
const baseUrl = 'http://xxxxxx'; //后台域名 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.getStorageSync("token"); //此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 }
网上有好多 仅供参考
-
get request uni 参数_uniapp如何封装request请求
2021-02-01 03:54:37uniapp封装request请求的方法:首先项目下新建common文件夹,再创建【request.js】文件;然后打开【request.js】文件,开始写封装的代码;最后通过promise异步请求,最后导出方法。本教程操作环境:windows7系统、...uniapp封装request请求的方法:首先项目下新建common文件夹,再创建【request.js】文件;然后打开【request.js】文件,开始写封装的代码;最后通过promise异步请求,最后导出方法。
本教程操作环境:windows7系统、uni-app2.5.1版本、thinkpad t480电脑。
uniapp封装request请求的方法:
1、项目下新建common文件夹,再创建request.js文件
2、打开request.js文件,开始写封装的代码
思路很简单定义域名:baseUrl;
定义方法:api;
通过promise异步请求,最后导出方法。
request.js参考代码如下const baseUrl = 'https://unidemo.dcloud.net.cn'
const request = (url = '', date = {}, type = 'GET', header = {
}) => {
return new Promise((resolve, reject) => {
uni.request({
method: type,
url: baseUrl + url,
data: date,
header: header,
dataType: 'json',
}).then((response) => {
setTimeout(function() {
uni.hideLoading();
}, 200);
let [error, res] = response;
resolve(res.data);
}).catch(error => {
let [err, res] = error;
reject(err)
})
});
}
export default request
3、在main.js全局注册import request from 'common/request.js'
Vue.prototype.$request = request
4、页面调用this.$request('/api/news', {
// 传参参数名:参数值,如果没有,就不需要传
}).then(res => {
// 打印调用成功回调
console.log(res)
})
页面调用的index.vue
import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
components: {
uniList,
uniListItem
},
data() {
return {
productList: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
this.$request('/api/news', {
// 传参参数名:参数值,如果没有,就不需要传
// "username": "john",
// "key": this.searchValue
}).then(res => {
// 打印调用成功回调
console.log(res)
this.productList = res;
})
},
}
}
相关免费学习推荐:编程视频
-
uniapp封装request请求
2020-09-28 09:30:01uniapp封装request请求request.jsmain.js使用请求 request.js export default function(config) { // 将配置参数中的地址结构出来 const {baseURL} = config; // 真正插件 return function (Vue) { Vue....uniapp封装request请求
request.js
export default function(config) { // 将配置参数中的地址结构出来 const {baseURL} = config; // 真正插件 return function (Vue) { Vue.prototype.http= async function (params) { // 结构请求相关参数 const {url ,method, data,headers} = params // 显示加载框 uni.showLoading({ title:'加载中...', mask: 'true' }) // 真正请求 const header = { "content-type": "application/x-www-form-urlencoded", "ticket": uni.getStorageSync("ticket"), "cookie": "JSESSIONID=" + uni.getStorageSync("sessionid") }; const res = await uni.request({ url: baseURL+url, method, data, header: headers || header }) uni.hideLoading(); return res[1] } } }
main.js
import Vue from 'vue' import App from './App' // 导入uni.request请求路径的封装 import request from '@/utils/request' Vue.config.productionTip = false App.mpType = 'app' // 插件 const plugin = request({ // baseURL:'http://********:8080/TSY' baseURL: 'https://***.***com/TSY' }); Vue.use(plugin) const app = new Vue({ ...App }) app.$mount()
使用请求
this.http({ url:'/api/pubshare/testPaper/getListJsonData', method:'post', data:{}, }).then(res => { console.log('试卷',res) if(res.type == 'success'){ this.shijuan = res.datas } }).catch(err =>{ uni.showToast({ title:'请求失败' }) })
-
uniapp request及其插件使用
2020-05-19 00:02:02学习vue框架中request api及uni社区中luchrequest 插件的使用; 学习fastmock的使用; -
uniapp的request封装
2020-08-10 15:32:59uniapp uni-app 是一个使用 Vue.js 开发所有前端应用的框架,...封装uni.request 创建uni_url.js文件 let uni_url = '' if (process.env.NODE_ENV == "development") { uni_url = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxuniapp
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
封装uni.request
创建uni_url.js文件
let uni_url = '' if (process.env.NODE_ENV == "development") { uni_url = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // 开发环境 } else { uni_url = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //生产环境 } export default uni_url
创建uniRequest.js文化
import uni_url from './uni_url.js' export const $uniRequset = (data) => { return new Promise((resolve, reject) => { uni.request({ url: uni_url + data.url, method: data.method || 'GET', data: data.data || '{}', success: (res) => { resolve(res) }, fail: (err) => { uni.showToast({ title: "请求接口失败!", icon: 'none' }) reject(err) } }) }) }
main.js注册
import $uniRequest from './uniRequest.js' Vue.prototype.$uniRequest = $uniRequest;
-
get request uni 参数_基于uniapp的request封装promise
2021-01-05 10:12:30基于uniapp的request封装promise先说说uniapp中的this把在uniapp中引入文件,当前的环境是undefined,所以我们使用必报封装的时候就要传入window ,大体结构如下(function(global, callback()) { return global === ... -
uniapp-request.zip-Promise方式封装uniapp请求
2020-06-24 18:07:12uniapp 请求方式嵌套一层Promise用async和await的形式去写代码,错误请求统一处理,类同步方式写代码告别回调地狱 -
uniapp request的封装
2020-09-01 10:58:23} },"/pages/machineGroupOutput/machineGroupOutput","1") } uniapp官方调用: uni.request({ url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。 data: {text: 'uni.request'}, header: {'... -
uniapp request请求封装
2020-07-27 17:39:43uni.request({ url: ApiUrl + opt.url, data: opt.data, method: opt.method, header: opt.header, dataType: 'json', success: function(res) { uni.hideLoading() opt.success(res);... -
uniapp封装request异步请求
2020-11-30 14:54:53uniapp封装request请求 复制粘贴,稍微改改就能用,不多说直接上代码!! request.js // 全局请求封装 const token = '自己的token令牌,最好读取缓存中的' // const token = uni.getStorage('token') const apiUrl...