uniapp使用luch-request

官网: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 => {})

 

uniapp是一款跨平台的开发框架,可以用于同时开发iOS、Android和Web应用程序。而luch-requestuniapp中一个常用的网络请求库,用于发送HTTP请求并处理响应。 luch-request封装了uni.request方法,提供了更加简洁和易用的接口,使得发送网络请求变得更加方便。它支持Promise风格的异步请求,可以发送GET、POST等各种类型的请求,并且可以设置请求头、请求参数、超时时间等。 以下是luch-request的一些主要特性和使用方法: 1. 支持拦截器:可以在请求发送前和响应返回后进行拦截和处理。 2. 支持全局配置:可以在全局设置请求的默认参数,如请求头、超时时间等。 3. 支持取消请求:可以取消正在进行的请求。 4. 支持文件上传和下载:可以发送文件上传请求,并支持进度监听。 5. 支持自动刷新token:可以在请求失败时自动刷新token并重新发送请求。 使用luch-request封装发送网络请求的步骤如下: 1. 安装luch-request:在uniapp项目中的package.json文件中添加依赖,并执行npm install命令进行安装。 2. 引入luch-request:在需要发送请求的页面或组件中引入luch-request库。 3. 创建实例:通过new关键字创建一个luch-request实例。 4. 发送请求:使用实例的request方法发送请求,并设置请求的相关参数。 5. 处理响应:在请求成功后,可以通过then方法获取响应数据;在请求失败后,可以通过catch方法捕获错误信息。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值