为什么应该在uni-app项目里使用luch-request?

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

项目的开发离不开数据交互，一个好的request请求库可以让我们的开发事半功倍。uni-app也不例外，uni.request只提供基础请求功能，无法达到项目开发的要求，luch-request应运而生。

luch-request是什么？

luch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力。

luch-request诞生于19-05月，至今已迭代20多个版本。DCloud插件市场request类插件下载量第一。支持npm下载。

它能为我们解决什么问题？

• 支持全局挂载
• 支持多个全局配置实例
• 支持自定义验证器
• 支持文件上传/下载
• 支持task 操作
• 支持自定义参数
• 支持多请求拦截器/响应拦截器
• 对参数的处理比uni.request 更强

也许你还不明白这些有什么用。但是他却对应着我们开发中一个一个的痛点。

你的数据获取方式

uni.request({
    url: this.$baseUrl + 'api/user?arg1=data1'
    method: 'POST',
    data: {id:1},
    header: {Content-Type: '...', token: '....'}
    success: (res) => {},
    fail: (err) => {}
}) 

使用luch-request后

this.$http.post('/api/user', {
    id: 1
}, {
    params: {
        arg1: data1
    }
}).then(res => {
    ...
}).catch(err => {
    ...
})

它有什么优势？

条件编译开发： 减少代码体积，减少开发中debug时的误导影响。看不到对应终端额外的参数。

极易的自定义能力： 有些插件会把loading、auth等参数加入配置，使其做一些请求之外的操作，这些配置并不是所有人都会使用。request请求库只需专注于请求即可。luch-request对额外操作的处理则更为优雅，增加了custom配置，使开发者可以做一些自定义操作。

http.setConfig((config) => { /* config 为默认全局配置*/
  config.baseURL = 'http://www.quanzhan.co' /* 根域名 */

  config.custom = {
    loading: true // 默认有loading
  }
  return config
})
http.interceptors.request.use((config) => { /* 请求之前拦截器。可以使用async await 做异步操作 */
  config.header = {
    ...config.header,
    a: 1 // 演示拦截器header加参
  }
  // 演示custom 用处
  if (config.custom.loading) {
    uni.showLoading()
  }
  return config
}, (config) => {
  return Promise.reject(config)
})

http.interceptors.response.use(async (response) => { /* 请求之后拦截器。可以使用async await 做异步操作  */
  // if (response.data.code !== 200) { // 服务端返回的状态码不等于200，则reject()
  //   return Promise.reject(response)
  // }
  if (response.config.custom.loading) {
    uni.hideLoading()
  }
  return response
}, (response) => { // 请求错误做点什么。可以使用async await 做异步操作
  console.log(response)
  if (response.config.custom.loading) {
    uni.hideLoading()
  }
  return Promise.reject(response)
})

// 单接口不想要loading
http.get('user/list', {custom: {loading: false}})
http.post('user/list', {}, {custom: {loading: false}})

易用的api设计： 部分api设计为降低学习成本，参照axios设计。并扩展一些其它的api，入门更加容易。

…

快速上手

npm

npm i luch-request -S

cli 用户使用npm 包需增加以下配置项目根路径下创建vue.config.js 文件，增加以下内容

// vue.config.js
 module.exports = {
      transpileDependencies: ['luch-request']
 }

GitHub

GitHub

使用DCloud/luch-request 文件夹即可

DCloud插件市场

DCloud插件市场

luch-request官网

luch-request官网

更新历史

更新记录