uniapp 网络请求封装【luch-request 3.x】
1. luch-request 介绍
2. luch-request 安装
3. luch-request 封装
1. luch-request 介绍
luch-request 基于 Promise 开发的 uni-app 跨平台请求库。对于使用者来说,最突出的优点是: 方便简单的自定义能力,可以通过 custom
自定义参数;相当于 uni.request()
来说,可配置更高,支持请求拦截,响应拦截
2. luch-request 安装
方式一: 使用 npm 安装
安装 luch-request 包
npm i luch-request -S
cli 用户使用 npm 包需要在项目根路径下创建 vue.config.js
文件,增加以下内容:
// vue.config.jsmodule.exports = { transpileDependencies: ['luch-request']}
使用示例 :
import Request from 'luch-request' // 使用 npmconst http = new Request();
方式二: 通过 dcloud 插件市场安装
luch-request 插件 : https://ext.dcloud.net.cn/plugin?id=392
通过 dcloud 插件市场安装 luch-request 插件会将其安装到 js_sdk 目录下,使用示例 :
import Request from '@/js_sdk/luch-request/luch-request' // 使用 dcloud 插件const http = new Request();http.get('/user/info', { params: { uid: 1 } }).then(res => {}).catch(err => {})
3. luch-request 封装
uView 的 http 网络请求就是集成于 luch-request,uView 对其进行了简单封装uView 官方文档提供一套 封装示例,可参考其封装思想,亦可在这套封装示例上进行修改。下面是没有使用 uView 时,单独安装 luch-request 插件进行封装的示例
在 uni-app 的入口文件 main.js 中将 luch-request 实例挂载到 uni.http
上
import Request from '@/js_sdk/luch-request/luch-request/index.js'uni.http = new Request()
一、全局配置,以及请求,响应拦截器定义
在 api/request.js
中进行网络请求全局配置,请求拦截器和响应拦截器定义,下面是最简单的结构 :
module.exports = vm => { // 初始化请求配置 uni.http.setConfig(config => { // 可在此处接口域名前缀 return config }) // 请求拦截 uni.http.interceptors.request.use(config => { // 此时 data 为 undefined, 赋予默认 {} config.data = config.data || {} // 可在此处将用户状态 token 放入请求头 return config }, config => { // 可使用async await 做异步操作 return Promise.reject(config) }) // 响应拦截 uni.http.interceptors.response.use(response => { const data = response.data return data.data === undefined ? {} : data.data }, response => { // 对响应错误做点什么 (statusCode !== 200) return Promise.reject(response) })}
二、引用配置
在 main.js
中引用 api/request
,注意引用的书写位置,需要在得到 Vue 实例之后,如下:
const app = new Vue({ store, ...App})// 引入请求封装,将app参数传递到配置中require('@/api/request')(app)
三、Api 集中管理
在 api/user.js
中编写请求接口,将用户相关的接口都放入该文件
在这个文件到导出方法即可,为了使用方便,原则是可以通过下面这种方式解构得到方法
// 需要使用哪个接口,就只解构出相应的接口方法import { login, getUserInfo } from '@/api/user'
导出方法的方式有很多,列举出几种写法 :
const http = uni.httpmodule.exports = { // 用户登录 login: params => http.post('/user/login', params), // 获取用户信息 getUserInfo: params => http.get('/user/getUserInfo', { params }),}
const http = uni.http// 用户登录export const login = params => http.post('/user/login', params)// 获取用户信息export const getUserInfo = params => http.get('/user/getUserInfo', { params })更新于:15天前
相关文章
- .NET Core Razor Page ajax请求返回400 Bad request
- uniapp 中 vuex 的使用
- HTTP请求方法(HTTP Request Method)
- uniapp 国际化开发指南【多语言】
- uniapp 返回上一级页面并触发指定方法
- uniapp 项目打包安卓 App
- uniapp 工具类方法封装
- uniapp 中的生命周期函数
- uniapp 中的交互反馈 API【提示框】
- Vue 网络请求模块封装 (axios)
- uniapp 微信小程序 控制台警告和错误处理
- uniapp 中的 tabBar 配置
- uniapp 目录结构及开发规范
- C#检测网络端口是否被占用的参考代码
- Windows中如何通过网络远程运行另外一台Windows的界面程序
- Python连接网络的方法及应用
- 创建 Netboot.XYZ 服务器以通过网络安装发行版
- F5负载均衡:优化网络性能的得力利器