[TOC] #### 1. luch-request 介绍 --- github : [https://github.com/lei-mu/luch-request](https://github.com/lei-mu/luch-request) luch-request 文档 : [https://www.quanzhan.co/luch-request](https://www.quanzhan.co/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` 文件,增加以下内容: ```javascript // vue.config.js module.exports = { transpileDependencies: ['luch-request'] } ``` 使用示例 : ```javascript import Request from 'luch-request' // 使用 npm const http = new Request(); ``` **方式二: 通过 dcloud 插件市场安装** luch-request 插件 : [https://ext.dcloud.net.cn/plugin?id=392](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 官方文档提供一套 [封装示例](https://www.uviewui.com/js/http.html#%E5%AE%9E%E8%B7%B5),可参考其封装思想,亦可在这套封装示例上进行修改。下面是没有使用 uView 时,单独安装 luch-request 插件进行封装的示例 在 uni-app 的入口文件 main.js 中将 luch-request 实例挂载到 `uni.http` 上 ```javascript import Request from '@/js_sdk/luch-request/luch-request/index.js' uni.http = new Request() ``` **一、全局配置,以及请求,响应拦截器定义** 在 `api/request.js` 中进行网络请求全局配置,请求拦截器和响应拦截器定义,下面是最简单的结构 : ```javascript 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 实例之后,如下: ```javascript 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.http module.exports = { // 用户登录 login: params => http.post('/user/login', params), // 获取用户信息 getUserInfo: params => http.get('/user/getUserInfo', { params }), } ``` ```javascript const http = uni.http // 用户登录 export const login = params => http.post('/user/login', params) // 获取用户信息 export const getUserInfo = params => http.get('/user/getUserInfo', { params }) ```