- 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 包
代码语言：javascript复制npm i luch-request -Scli 用户使用 npm 包需要在项目根路径下创建 vue.config.js 文件，增加以下内容:
// vue.config.jsmodule.exports = { transpileDependencies: ['luch-request']}使用示例 :
代码语言：javascript复制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 目录下，使用示例 :
代码语言：javascript复制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 中编写请求接口，将用户相关的接口都放入该文件
在这个文件到导出方法即可，为了使用方便，原则是可以通过下面这种方式解构得到方法
代码语言：javascript复制// 需要使用哪个接口，就只解构出相应的接口方法import { login, getUserInfo } from '@/api/user'导出方法的方式有很多，列举出几种写法 :
代码语言：javascript复制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 })
