luch-request使用

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-ALIPAYresponseType: 'text',// #endif// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)custom: {}, // 全局自定义参数默认值// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXINtimeout: 60000,// #endif// #ifdef APP-PLUSsslVerify: true,// #endif// #ifdef H5// 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）withCredentials: false,// #endif// #ifdef APP-PLUSfirstIpv4: 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.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使用相关推荐

uniapp request请求封装
使用luch-request插件 npm i luch-request -S 在根目录的api文件夹下创建一个 service.js /*** @version 3.0.5* @Author lu-c ...
端口映射问题：Bad Request This combination of host and port requires TLS.
错误信息: Bad Request This combination of host and port requires TLS. 遇到上面的错误信息:如果是通过域名访问,则该域名后配置的转发端口映射 ...
GitHub 中 Merge pull request 的 3 中选项说明
Merge pull request 提供了 3 种 merge 方法: Create a merge commit:GitHub 的底层操作是 git merge --no-ff.feature 分 ...
将request中的所有参数存放到自定义的map中
/*** <获取参数map>* * @return 参数map* @throws Exception */protected Map<String, Object> getPa ...
Django Request对象3.3
HttpReqeust对象服务器接收到http协议的请求后,会根据报文创建HttpRequest对象视图函数的第一个参数是HttpRequest对象在django.http模块中定义了HttpR ...
微信 request 合法域名校验出错
报错信息 at Feb 19 2022 10:42:34 GMT+0800 (中国标准时间) request 合法域名校验出错如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目,操作路径:&q ...
微信小程序在使用wx.request时显示加载中
我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.request加工下就可以了,在utils下新建js文件network.j ...
微信小程序wx.request POST获取不到数据解决办法
get //发起请求 wx.request({ url: 'http://www.xiaochengxu.com/home/index/curd', //仅为示例,并非真实的接口地 ...
织梦手机站下一篇变上一篇而且还出错Request Error!
最新的织梦dedecms程序手机版下一篇变上一篇而且还出错Request Error!,这是因为官方写错了一个地方打开 /include/arc.archives.class.php 找到 $mli ...
3.request response
rr的介绍 request是代表请求,response是响应执行流程: 1.浏览器发送请求 2.服务器接受请求,创建两个对象,将请求信息封装给request,将两个对象发送给对应的servlet 3 ...

luch-request使用

一.luch-request使用大全

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

luch-request使用相关推荐

最新文章

热门文章