uniapp中网络请求插件luch-request的安装和使用

今天发现了一个uniapp网络请求的一个宝藏神器，luch-request，他可以让你像使用axios 一样使用luch-request，这对于习惯了使用axios的同学，是多么的香

一、luch-request是什么？

uniapp自带网络请求request功能不满足开发使用,luch-request基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截,luch-request功能类似axios。详情详见官网https://www.quanzhan.co/luch-request/

二、使用步骤

1.下载并引入

我是通过npm下载,每个项目的需求各有偏差,务必根据自己的项目调整相关配置,详情详见官网https://www.quanzhan.co/luch-request/

通过npm下载

npm i luch-request -S

2.创建http.js 文件

在src目录下创建http文件夹并创建index.js，代码如下

import Request from 'luch-request'


const http = new Request({
	baseURL: "https://api.xxxxx.com/", //设置请求的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"] = 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 {
	// get请求 可以拼接url或者传入数据对象 二选一
	getData(url, data) {
		// 传入的data对象  {name:'abc'}; 
		return http.get(url, { params: data });
	},
	// post请求
	postData(url, data) {
		// 传入的data对象  {name:'abc'}; 
		return http.post(url, data);
	},
	// put请求
	putData(url, data) {
		// 传入的data对象  {name:'abc'}; 
		return http.put(url, data);
	},
	// delete请求
	deleteData(url, data) {
		// 传入的data对象  {name:'abc'}; 
		return http.delete(url, data);
	}
}

3.创建 api.js 文件

在src目录下创建api文件夹并创建index.js 文件


import request from '../http/index'


export const selectAds = obj => getData("/selectAds", obj)

4.页面中使用


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

export default {
  methods: {
    getData() {
        let data = {id:'1'}
        selectAds(data).then((res)=>{
            console.log(res);
        }).catch((error)=>{
            console.log(error);
        })
    },
  },
};
</script>

以上这篇uniapp中网络请求插件luch-request的安装和使用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。