精华内容
下载资源
问答
  • uniapp使用luch-request

    2020-12-18 15:36:26
    官网:https://www.quanzhan.co/luch-request/ 下载luch-request插件,将插件...import Request from '@/common/luch-request/index.js' const http = new Request(); import {baseUrl} from './baseUrl.js' let d

    官网:https://www.quanzhan.co/luch-request/

    1. 下载luch-request插件,将插件放在common目录里
    2. 在根目录下的common目录里创建http目录,新建index.js
    3. commom/http/index.js
    import Request from '@/common/luch-request/index.js'
    const http = new Request();
    import {baseUrl} from './baseUrl.js'
     
    let defaultUrl = ''
    if(process.env.NODE_ENV === 'production'){
    	defaultUrl = baseUrl
    }else{
    	defaultUrl = 'xxxx'
    }
     
    http.setConfig((config) => { /* 设置全局配置 */
    	config.baseURL = defaultUrl
    	config.custom = {
    		loading:true
    	} 
    	config.header = {
    		
    		// a: 1, // 演示用
    		// b: 2 // 演示用
    	}
    	return config
    })
     
    //请求前拦截,用来动态加参
    http.interceptors.request.use((config) => { // 可使用async await 做异步操作
    	if(config.url !== '/logins' && config.url!=='/captcha/logins'){
    		config.header.Authorization ='Bearer '+ uni.getStorageSync("token")
    	}
    	
    	console.log('请求前拦截header',config)
    	if(config.url == '/images'){
    		config.header = {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
    		'Authorization':'Bearer' +' ' + uni.getStorageSync("token")
          }
    	}
    	config.header = {
    		...config.header,
    		a: 1 // 演示拦截器header加参  
    	}
    	// 演示custom 用处  
    	if (config.custom.loading) {
    		uni.showLoading()
    	}
    	return config
    }, (config) => {
    	return Promise.reject(config)
    })
     
     
    // 请求后
    http.interceptors.response.use((response) => {
    	
    	if (response.config.custom.loading) {
    		uni.hideLoading()
    	}
    	if (response.statusCode > 300 ||response.statusCode< 200) { 
    		console.log('reject')
    	  return Promise.reject(response)  
    	} 
    	return response.data
    }, (response) => { // 请求错误。可以使用async await 做异步操作  
    	console.log(response,'错误')
    	if (response.config.custom.loading) {
    		uni.hideLoading()
    	}
    	if(response.statusCode == 401){
    		uni.clearStorageSync();
    		uni.showToast({
    		    title: '登录失败,请重新登录',
    		    duration: 2000
    		});
    		
    		if(response.config.url !== "/logins"){
    			uni.reLaunch({
    				url:'/pages/login/login'
    			})
    		}
    	}else{
    		uni.showToast({
    		    title: response.data.messages[0].content,
    			icon: 'none',
    		    duration: 2000
    		});
    	}
    	return Promise.reject(response)
    })
    export default http
    

    4、在main.js里引入

    import * as http from './common/http/index.js'
     
    Vue.prototype.$http = http;
    

    5、在页面里调用

    this.$http.get(`/i/list`).then(res => {
    	this.data = res
    }).catch(err => {})
    
    this.$http.post('/logins', {
    	mobile: this.form.mobile
    }).then(res => {
    	....				
    }).catch(err => {})
    

    baseUrl.js 里 为 export let baseUrl = ‘http://192.168.1.1’,也可以直接写在这个页面

    转载:https://blog.csdn.net/lll_liuhui/article/details/109055111

    展开全文
  • 学习vue框架中request api及uni社区中luchrequest 插件的使用; 学习fastmock的使用;
  • <view class="content"> 测试网络button> 网络状态:{{isOnline}}view> view> js代码: //测试网络状态 async testInternet() { uni.showLoading({ title: '请求中' }) var [err, res] = await uni.request({...

    第一种方式

    内容区:

    <view class="content">
    	<button type="default" @click="testInternet">测试网络</button>
    	<view>网络状态:{{isOnline}}</view>
    </view>
    

    js代码:

    //测试网络状态
    async testInternet() {
    	uni.showLoading({
    		title: '请求中'
    	})
    	var [err, res] = await uni.request({
    		method: 'GET',
    		url: 'http://127.0.0.1',
    		timeout: 2000
    	})
    	uni.hideLoading()
    	if (res) {
    		this.isOnline = true
    	} else {
    		this.isOnline = true
    	}
    	console.log('可以上网?')
    	console.log(this.isOnline)
    }
    

    第二种方式

    uni.request同步化,具体代码参考

    <template>
    	<view class="content">
    		<image class="logo" src="/static/logo.png"></image>
    		<view class="text-area">
    			<text class="title">{{title}}</text>
    		</view>
    		<view class="content">
    			<button type="default" @click="testInternet">测试网络</button>
    			<view>网络状态:{{isOnline}}</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: 'Hello',
    				isOnline: false
    			}
    		},
    		onLoad() {
    			// this.doTest()
    			this.doTest2()
    		},
    		methods: {
    			async doTest(){
    				var test1 = await this.getTest1()
    				if(test1){
    					var test2=await this.getTest2()
    				}
    				console.log('22222222222222')
    			},
    			doTest2(){
    				this.getTest1()
    					.then((res)=>this.getTest2())
    					.then((res)=>this.getTest3())
    					.catch((err)=>{
    						console.log(err)
    					})
    			},
    			getTest1(){
    				return new Promise((resolve,reject)=>{
    					uni.request({
    						url:'http:172.18.5.3',
    						method:'GET',
    						success: (res) => {
    							console.log(res.statusCode)
    							console.log('test1')
    							resolve(true)
    						},
    						fail:(err)=>{
    							console.log(err)
    							console.log('test1')
    							reject(false)
    						}
    					})
    				})
    			},
    			getTest2(){
    				return new Promise((resolve,reject)=>{
    					uni.request({
    						url:'http:172.18.5.3',
    						method:'GET',
    						success: (res) => {
    							console.log(res.statusCode)
    							console.log('test2')
    							resolve('suc')
    						},
    						fail:(err)=>{
    							console.log(err)
    							console.log('test2')
    							reject('err')
    						}
    					})
    				})
    				
    			},
    			getTest3(){
    				return new Promise((resolve,reject)=>{
    					uni.request({
    						url:'http:172.18.5.3',
    						method:'GET',
    						success: (res) => {
    							console.log(res.statusCode)
    							console.log('test3')
    							resolve('suc')
    						},
    						fail:(err)=>{
    							console.log(err)
    							console.log('test3')
    							reject('err')
    						}
    					})
    				})
    				
    			},
    			//测试网络状态
    			async testInternet() {
    				uni.showLoading({
    					title: '请求中'
    				})
    				var [err, res] = await uni.request({
    					method: 'GET',
    					url: 'http://172.18.5.3',
    					timeout: 2000
    				})
    				uni.hideLoading()
    				if (res) {
    					this.isOnline = true
    				} else {
    					this.isOnline = false
    				}
    				console.log('可以上网?')
    				console.log(this.isOnline)
    			}
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>
    
    展开全文
  • uniapp 请求方式嵌套一层Promise用async和await的形式去写代码,错误请求统一处理,类同步方式写代码告别回调地狱
  • uniapp封装好的request
  • uniapp全局请求插件luch-request的使用

    千次阅读 2020-07-01 16:59:03
    首先安装luch-request ,我是用插件中心直接导入,然后根目录下utils下放插件luch-request 根据文档在main.js里创建实例 //引入全局请求插件 import { http,api } from '@/config/common.js' // 全局挂载引入,配置...

    首先安装luch-request ,我是用插件中心直接导入,然后根目录下utils下放插件luch-request

    根据文档在main.js里创建实例
    在全局配置里可以设置默认参数和拦截器
    静态参数就放在config里,比如type,event之列,动态的就使用拦截器传参,比如token。返回的参数也可以用拦截器来获取,比如response codes 判断登录状态、权限

     //引入全局请求插件
    import { http,api } from '@/config/common.js' // 全局挂载引入,配置相关在该index.js文件里修改
    Vue.prototype.$http = http
    Vue.prototype.$api = api
    

    然后根目录下创建config目录,建立common.js。在这里引入插件,与全局配置,拦截器。
    局部配置的优先级高于全局配置,这个根据需要使用

    import Request from '@/utils/luch-request/index.js'
    export const apiBaseUrl = 'http://www.baidu.com'
    const api = new Request()
    const http = new Request()
    export {
      http,
      api
    }
    http.config.header = {website:'123dfdf465132'}
    api.config.header={aaaaaaa:'sdfsdfsdfsdfsd'}
    api.setConfig((config) => { /* 设置全局配置 */
      config.header = {
        ...config.header,
        a: 1111111, // 演示
        b: 2222 // 演示
      }
      return config
    })
    
    
    //请求前拦截,用来动态加参,例如token
    api.interceptors.request.use((config) => { // 可使用async await 做异步操作
      config.baseURL = apiBaseUrl
      config.header = {
        ...config.header,
        token:uni.getStorageSync('token')
        // 'testaaa': '11' // 演示拦截器header加参
      }
    
      // 演示custom 用处
      // if (config.custom.auth) {
      //   config.header.token = 'token'
      // }
      // if (config.custom.loading) {
      //  uni.showLoading()
      // }
      /**
       /* 演示
       if (!token) { // 如果token不存在,return Promise.reject(config) 会取消本次请求
          return Promise.reject(config)
        }
       **/
      return config
    }, config => { // 可使用async await 做异步操作
      return Promise.reject(config)
    })
    
    
    // 请求后
    api.interceptors.response.use((response) => {
      console.log(response)
      return response
    }, (response) => { /*  对响应错误做点什么 (statusCode !== 200)*/
      console.log(response)
      console.log(response.statusCode);
      //未登录时清空缓存跳转
      if(response.statusCode ==401){
    	  uni.clearStorageSync();
    	  uni.switchTab({
    	  	url:"/pages/user/user"
    	  })
      }
      return Promise.reject(response)
    })
    

    用的时候在页面里直接调用

     
    		this.$http.post('/api/demo/test1', {userName: 'name', password: '123456'} ).then(res => {
    		
    		}).catch(err => {
    		
    		})
    
    
    展开全文
  • uniapp 封装request请求

    2021-08-25 17:42:05
    const request = (params) => { // 显示加载数据的提示 uni.showLoading({ title: '加载中', mask: true }) return new Promise(function(resolve, reject) { const baseUrl = Vue.protot.

    1.首先在根目录新建common/http目录,然后在http中新建两个js如 图

    2.http.js代码

    import Vue from 'vue'
    const request = (params) => {
    	// 显示加载数据的提示
    	uni.showLoading({
    		title: '加载中',
    		mask: true
    	})
    	return new Promise(function(resolve, reject) {
    		const baseUrl = Vue.prototype.$baseUrl;
    		let token_value;
    		try {
    			token_value = uni.getStorageSync('token');
    			if (token_value) {
    				token_value = 'Bearer ' + token_value;
    			}
    		} catch (e) {
    			// error
    		}
    		uni.request({
    			method: params.method,
    			data: params.data,
    			url:baseUrl + params.url,
    			header: {
                        此处是token 可不加,如果加了需要配置后端允许跨域
    				'Authorization': 'token'
    			},
    			success(res) {
    				setTimeout(function() {
    					resolve(res)
    				}, 500);
    			},
    			fail(err) {
    				reject(err)
    			},
    			complete() {
    				setTimeout(function() {
    					uni.hideLoading()
    				}, 500);
    
    			}
    		})
    	})
    }
    export default request;
    

    3.api.js 存放的是所有的接口

    import request from "./http.js"
    import Vue from 'vue'
    export default {
    	//获取app版本
    	api_getUpdateApp: function(params) {
    		return request({
    			method: "POST",
    			url: "index/app_fun/getUpdateApp",
    			data: params
    		});
    	},
    	///获取首页的功能列表
    	api_getFunList:function(params) {
    		return request({
    			method:"POST",
    			url:"api/app_fun/getFunList",
    			data:params
    		})
    	},
    
    }

     3.配置main.js,允许全局使用

    import Vue from 'vue'
    import App from './App'
    import api from 'common/http/api.js'
    
    Vue.prototype.$api = api
    
     if (process.env.NODE_ENV === 'development') {
     	//开发环境
     	Vue.prototype.$http="http://192.168.0.103/"
     	Vue.prototype.$baseUrl = "http://192.168.0.103/public/index.php/"
     	Vue.prototype.$fileUrl = "http://192.168.0.103/public/"
     } else {
     	//生产环境
    	Vue.prototype.$http="https://s.june.com/"
     	Vue.prototype.$baseUrl = "https://s.june.com/public/index.php/"
     	Vue.prototype.$fileUrl = "https://s.june.com/public/" //图片展示域名
     }
    App.mpType = 'app'
    
    const app = new Vue({
    	...App
    })
    app.$mount()
    

    4.页面中调用接口

    <template>
    	<view class="content">
    
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: 'Hello',
    			
    			}
    		},
    		onLoad() {
                   /* 该接口是在api.js中定义过的 */
    			this.$api.api_getUpdateApp({
    				user_id:'sdfsdfsd',
    				name:'测试'
    			}).then(res=>{
    				/* 成功的回调 */
    			}).catch(err=>{
    				/* 失败回调 */
    			}).finish(e=>{
    				/* 成功或者失败都会执行 */
    			})
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style>
    
    </style>
    

    展开全文
  • uniapprequest请求封装

    2021-05-07 16:30:56
    uniapprequest请求封装目录结构封装代码全局引入使用示例 目录结构 封装代码 http.js const baseUrl = 'https://www.example.com';//基础地址 export const request = (options) => { let token = 'Bearer '...
  • uniapp封装请求方法(含请求期间的Loading样式)一、封装步骤二、封装思路解析 一、封装步骤 1. 在项目的根目录创建目录结构如下: 封装的请求方法代码如下: // 全局请求路径,也就是后端的请求基准路径 const ...
  • uniapp网络请求uni.request封装 import Vue from 'vue' export function request(url, data, method = 'get', contentType = 1) { const baseUrl = Vue.prototype.$baseUrl; let header = { 'content-type': ...
  • uniapp封装request异步请求

    千次阅读 2020-11-30 14:54:53
    uniapp封装request请求 复制粘贴,稍微改改就能用,不多说直接上代码!! request.js // 全局请求封装 const token = '自己的token令牌,最好读取缓存中的' // const token = uni.getStorage('token') const apiUrl...
  • uniapp 网络请求插件封——基于uni request原生 声明 此插件fork自 , 此处为借鉴学习之用(建议萌新阅读源码), 同时也是熟悉插件发布流程, 源码作了部分修改(非bug,自身需求),使用方式未变化,如何使用? ...
  • luch-request简易配置 luch-request-uni应用市场地址: 应用市场 从应用市场下载后 目录为 js_sdk 在根目录新建 utils 目录 将下载在 js_sdk 下的 luch-request目录 复制到新建的 utils 目录 在根目录新建 config ...
  • 在main.js中编写uniapp的接口封装。 import Vue from 'vue' import App from './App' // 封装请求接口 const http = { /** * 提示开始请求 * @param {Object} text:提示的内容--[开始请求] * @param {Object...
  • 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....
  • 常见的直接发起uni.request()请求 第二种:async修饰函数和await的使用,这个好像是es7的 第三种:es6异步promise封装这种发起请求接口,......百度云里面有shequ-jiaoyou-master + DIY代码+备份: 推荐插件在这里备份...
  • uniapp小程序封装request请求

    千次阅读 2020-02-22 17:55:57
    停工不停学,逆战中求生存,最近学习到小程序,避免不了要请求数据,这里稍微给封装一下request,这里以uniapp为例,其他小程序,稍加修改 1.新建一个utils目录,再创建一个index const baseUrl = ...
  • //请求的网络地址和局地的api地址组合 uni.showLoading({ title: '加载中', mask: true }) return uni.request({ url: url, data: dataObj, method: prams.method, header: headerData, ...
  • uniapp.request遇到的坑

    千次阅读 2020-10-10 08:39:47
    uniapp.request遇到的坑 发起post请求的时候data接收不到参数,解决:发起请求中添加 uni.request({ header: { 'content-type': 'application/x-www-form-urlencoded' } })
  • uniapp的请求request写法

    千次阅读 2020-05-09 16:38:54
    uni.request({ url:"http://localhost/tp5/publica/index/web/view", method:"POST", data:{ name:view.title }, dataType:'json',//设置json返回值就会json.parse header:{ ...
  • 1.新建utils文件夹,新建uni_request.js export default function ({ baseURL, timeout = 56 * 1000, header: headers, statusCode = [200, 401] }) { return { get(url, data, header, ...args) { return this....
  • request.js const baseUrl = getApp().globalData.baseURL import utils from './utils.js' export const request = (options) => { const token = uni.getStorageSync('token'); const { method, url, ...
  • charset=UTF-8' }, dataType: 'json', } let promise = new Promise(function(resolve, reject) { uni.request(httpDefaultOpts).then( (res) => { resolve(res[1]) } ).catch( (response) ...
  • uniapp中提供了uni.request进行向http请求数据(可以理解为ajax请求)。 uni.request 不支持 jsonp。 一种办法是:在uni-app 的项目中 manifest.json文件中配置跨域代理 manifest.json文件配置 manifest.json使用...
  • https://blog.csdn.net/sayyy/article/details/106269732
  • uniapprequest 请求出现400错误 uniapp springboot 开发微信小程序项目,前端向后端发送请求,前端爆400错误。 400错误: 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后端服务里 **原因:**...
  • 根目录下新建util(文件/文件夹名字随意)文件夹,下面新建request.js请求; 二、util/request.js文件夹内容 这个是一个登录功能的请求接口,请求的header大家根据实际情况来写 /* @params url 接口地址 @...
  • // 定义域名,可以随时更改 ...export const myRequest = (options)=>... uni.request({ url:BASE_URL + options.url, //可以传入请求方式,不传的话默认就是GET method:options.method || 'GET', data.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,518
精华内容 1,807
关键字:

requestuniapp