一、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.jsmodule.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 urltimeout: 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>

总结

luch-request使用方法相关推荐

java note项目_Java Request.setNote方法代码示例
import org.apache.catalina.connector.Request; //导入方法依赖的package包/类 /** * Perform single-sign-on suppo ...
Spring中获取request的方法及其线程安全性分析
在使用Spring MVC开发Web系统时,经常需要在处理请求时使用request对象,比如获取客户端ip地址.请求的url.header中的属性(如cookie.授权信息).body中的数据等.由于 ...
SpringMvc 400 Bad Request解决方法
SpringMvc 400 Bad Request解决方法参考文章: (1)SpringMvc 400 Bad Request解决方法 (2)https://www.cnblogs.com/shiz ...
request.getPathInfo() 方法的作用
request.getPathInfo() 方法的作用作者:joejoe1991 日期:2008-07-19 request.getPathInfo(); 这个方法返回请求的实际URL相对于请求的s ...
python request microsoft graph_Python request.headers方法代码示例
本文整理汇总了Python中flask.request.headers方法的典型用法代码示例.如果您正苦于以下问题:Python request.headers方法的具体用法?Python reque ...
为什么我的JSP文件使用不了request.getParameter()方法
为什么我的JSP文件使用不了request.getParameter()方法
request.getParameter()方法
request.getParameter()方法:1.获取通过http协议提交过来的数据. 通过容器的实现来取得通过get或者post方式提交过来的数据 2.request.getPara ...
ASP——Request.Form()方法获取POST提交方式的表单中文乱码解决方案
方法一直接用request.Form()获取的是所有数据所以会有乱码(具体原因不祥) 用 Foreach obj in Request.Form Response.write obj &&q ...
jenkins-RestAPI调用出现Error 403 No valid crumb was included in the request解决方法
方法一: 在jenkins 的Configure Global Security下 , 取消"防止跨站点请求伪造(Prevent Cross Site Request Forgery exp ...
request请求方法
1.获取请求方法 request.method 2.获取去掉参数的url request.base_url 3.获取只有主机和端口号的url request.host_url 4.获取完整的请求地址 ...

luch-request使用方法

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