luch-request使用方法

前端小白,以下内容为个人整理,原文请参考https://blog.youkuaiyun.com/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>

总结