大家好，欢迎来到IT知识分享网。

前端小白,以下内容为个人整理,原文请参考https://blog.csdn.net/r657225738/article/details/110549308

一、luch-request是什么？

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

二、使用步骤

1.下载并引入

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

通过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>

总结