luch-request使用

Posted 2023-03-29 开发那点事儿~

 luch-requdst是什么?

uniapp自带网络请求request功能不满足开发使用,luch-request基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截,luch-request功能类似axios,本文在vue-cli3构建的项目中使用.

luch-request (quanzhan.co)

一.luch-request使用大全

        1. 下载并引入

npm i luch-request -S

        main.js中:

import Request from 'luch-request' //yarn
// Vue.prototype.$http = new Request ==> 通过new 一个Request实例给Vue的原型上面
Vue.prototype.$http = new Request(
	// 全局配置
	baseURL: BaseUrl,
	header: 
		/* 这个地方每次都调用 */
		"X-Access-Token": uni.getStorageSync('token')
	,
	method: 'GET',
	dataType: 'json',
	// #ifndef MP-ALIPAY
	responseType: 'text',
	// #endif
	// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
	custom: , // 全局自定义参数默认值
	// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
	timeout: 60000,
	// #endif
	// #ifdef APP-PLUS
	sslVerify: true,
	// #endif
	// #ifdef H5
	// 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
	withCredentials: false,
	// #endif
	// #ifdef APP-PLUS
	firstIpv4: ture, // DNS解析时优先使用ipv4 仅 App-android 支持 (HBuilderX 2.8.0+)
	// #endif
	// 局部优先级高于全局，返回当前请求的task,options。请勿在此处修改options。非必填
	// getTask: (task, options) => 
	// 相当于设置了请求超时时间500ms
	//   setTimeout(() => 
	//     task.abort()
	//   , 500)
	// ,
	// 全局自定义验证器。参数为statusCode 且必存在，不用判断空情况。
	validateStatus: (statusCode) =>  // statusCode 必存在。此处示例为全局默认配置
		return statusCode >= 200 && statusCode < 300
	
);
// 示例：this.$http.get("url",param:a:1,b:2).then(()=>).catch(err=>)
// 传json字符串this.$http.post('url',a:"1",b:"2").then(()=>).catch(err=>)
// 传form-data表单this.$http.post('url',a:"1",b:"2",header: "content-type":"application/x-www-form-urlencoded").then(()=>).catch(err=>)
// 帮助：https://ext.dcloud.net.cn/plugin?id=392
// 详见https://www.quanzhan.co/archives/251 问题8

使用:

  get :

this.$http.get("url",param:a:1,b:2).then(()=>).catch(err=>)

  post :

this.$http.post('url',a:"1",b:"2").then(()=>).catch(err=>)

  使用form-data表单进行post: (使用form表单post)

this.$http.post('url',a:"1",b:"2",header: "content-type":"application/x-www-form-urlencoded").then(()=>).catch(err=>)

完整示例:

this.$http.post('/index/url',form)
				.then(res => 
					if (res.data.success) 
						console.log(res.data.result);
						//业务逻辑

					 else 
						uni.showToast(
							icon: 'none',
							title: '发起失败，请联系管理员！',
							duration: 2000
						)
						console.log(res);
					
				).catch(err => 
					uni.showToast(
						icon: 'none',
						title: '发起失败，请联系管理员！',
						duration: 2000
					)
					console.log(err);
				)

二. uni-app+vuecli+luch-request网络请求二次封装

1. 下载并引入

        通过npm 下载

npm i luch-request -S

        vue-cli3构建babel,config文件合并了,所以需要在根路径下创建vue.config.js文件,增加以下内容

// vue.config.js
 module.exports = 
      transpileDependencies: ['luch-request']
 

 2.  创建httpload.js文件

        在src目录下创建http文件夹并创建httpload.js文件,将以下代码放入httpload.js中

import Request from 'luch-request'//npm下载引入luch-request

// import qs from 'qs'
const http = new Request(
	baseURL: "https://elm.cangdu.org/", //设置请求的base url
	timeout: 300000, //超时时长5分钟,
	header: 
		'Content-Type': 'multipart/form-data;application/json;charset=UTF-8;'
	
)

//请求拦截器
http.interceptors.request.use((config) =>  // 可使用async await 做异步操作
	const token = uni.getStorageSync('token');
	if (token) 
		config.headers.common["Authorization"] = 'Bearer ' + token;
	

	if (config.method === 'POST') 
		config.data = JSON.stringify(config.data);
	
	return config
, error => 
	return Promise.resolve(error)
)

// 响应拦截器
http.interceptors.response.use((response) => 
	console.log(response)
	return response
, (error) => 
	//未登录时清空缓存跳转
	if (error.statusCode == 401) 
		uni.clearStorageSync();
		uni.switchTab(
			url: "/pages/index/index.vue"
		)
	
	return Promise.resolve(error)
)
export default http;

 3. 创建api.js文件

        在src目录下创建api文件夹并创建index.js文件,将以下代码放入index.js中

        

// import request from '@/http/httpload.js'
import request from '../http/httpload'//导入http下的httpload.js
		/* 测试Api */
	export default
		// get请求 可以拼接url或者传入数据对象 二选一
		getData(url,data)
            // 传入的data对象  ip:'121.00.00.01'; 
			return request.get( url,params:data);
		,
		// post请求
		postData(url,data)
			// 传入的data对象  ip:'xxxxxx'; 
			return request.post(url,data);
		,
		// put请求
		putData(url,data)
			// 传入的data对象  ip:'xxxxxx'; 
			return request.put(url,data);
		,
		// delete请求
		deleteData(url,data)
			// 传入的data对象  ip:'xxxxxx'; 
			return request.delete(url,data);
		
	 

 4. 页面中调用

<template>
  <div>
    <button @click="getData">获取get数据</button>
  </div>
</template>
<script>
import TestApi from "@/api/index.js";

export default 
  methods: 
    getData() 
      var url = "v1/pois"; //url地址
      var data =  city_id: "1", keyword: 1, type: "search" ; //参数
      TestApi.getData(url, data)
        .then((res) => 
          console.log(res);
        )
        .catch((error) => 
          console.log(error);
        );
    ,
  ,
;
</script>

测试使用

测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用测试使用