精华内容
下载资源
问答
  • uniapp request封装

    2021-02-27 16:29:20
    uniapp 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
    }
    

    网上有好多 仅供参考

    展开全文
  • uniapp封装request请求的方法:首先项目下新建common文件夹,再创建【request.js】文件;然后打开【request.js】文件,开始写封装的代码;最后通过promise异步请求,最后导出方法。本教程操作环境:windows7系统、...

    uniapp封装request请求的方法:首先项目下新建common文件夹,再创建【request.js】文件;然后打开【request.js】文件,开始写封装的代码;最后通过promise异步请求,最后导出方法。

    7a7c477d6d09c7c0d3b9ae2b4066c1a8.png

    本教程操作环境:windows7系统、uni-app2.5.1版本、thinkpad t480电脑。

    uniapp封装request请求的方法:

    1、项目下新建common文件夹,再创建request.js文件

    f4a76ee8d90444c39634541d87cfe898.png

    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

    f9da355cedf389d31f2e05849738719c.png

    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:01
    uniapp封装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:'请求失败'
    })
        })
    
    展开全文
  • 学习vue框架中request api及uni社区中luchrequest 插件的使用; 学习fastmock的使用;
  • uniapprequest封装

    2020-08-10 15:32:59
    uniapp uni-app 是一个使用 Vue.js 开发所有前端应用的框架,...封装uni.request 创建uni_url.js文件 let uni_url = '' if (process.env.NODE_ENV == "development") { uni_url = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    uniapp

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

    uniapp官网

    封装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;
    
    展开全文
  • 基于uniapprequest封装promise先说说uniapp中的this把在uniapp中引入文件,当前的环境是undefined,所以我们使用必报封装的时候就要传入window ,大体结构如下(function(global, callback()) { return global === ...
  • uniapp 请求方式嵌套一层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:43
    uni.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请求 复制粘贴,稍微改改就能用,不多说直接上代码!! request.js // 全局请求封装 const token = '自己的token令牌,最好读取缓存中的' // const token = uni.getStorage('token') const apiUrl...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 409
精华内容 163
关键字:

requestuniapp