uniapp 网络请求封装【luch-request 3.x】

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 })