Uni-app is a framework for developing all front-end applications using vue.js. Developers write a set of code that can be published to iOS, Android, H5, various mini programs (wechat/Alipay/Baidu/Toutiao /QQ/ Dingding/Taobao), Kuaiapp and many other platforms.

The development of the project is inseparable from data interaction, a good request library can make our development twice the result with half the effort. Uni-app is no exception. Uni. request only provides basic request functions, which cannot meet the requirements of project development. Luch-request was born.

What is luch-request?

Luch-request is a cross-platform, project-level uni-App request library based on Promise, with a smaller volume, easy-to-use API, and easy customization capabilities.

Luch-request was born between May 19 and May 19 and has been iterated over 20 versions so far. Request is the most downloaded plug-in in DCloud market. NPM download is supported.

What problems can it solve for us?

  • Global mount is supported
  • Multiple global configuration instances are supported
  • Supports custom validators
  • Support file upload/download
  • Support task operations
  • Supports custom parameters
  • Support for multiple request interceptors/response interceptors
  • Processing of parameters is stronger than uni.request

Maybe you don’t understand what this is all about. But he corresponds to one pain point after another in our development.

How you get your data

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

Use the luch – after the request

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

What are its advantages?

Conditional compiled development: Reduces code volume and reduces the misleading effects of debugging during development. No additional parameters are available for the corresponding terminal.

Easy customization: Some plug-ins add parameters such as Loading and Auth into their configurations to perform operations that are not required. Not everyone can use these configurations. The request library only needs to focus on the request. Luch-request handles extra operations more elegantly, adding a custom configuration that allows developers to do custom operations.

http.setConfig((config) = > { /* config is the default global configuration */
  config.baseURL = 'http://www.quanzhan.co' /* Root domain */

  config.custom = {
    loading: true // By default, loading is enabled
  }
  return config
})
http.interceptors.request.use((config) = > { /* Request before interceptor. You can use async await to do asynchronous operations */config.header = { ... config.header,a: 1 // demo interceptor header arguments
  }
  // demonstrate custom uses
  if (config.custom.loading) {
    uni.showLoading()
  }
  return config
}, (config) => {
  return Promise.reject(config)
})

http.interceptors.response.use(async (response) => { /* Request after interceptor. You can use async await to do asynchronous operations */
  // if (response.data.code ! Reject () {reject() {reject() {reject() {reject();
  // return Promise.reject(response)
  // }
  if (response.config.custom.loading) {
    uni.hideLoading()
  }
  return response
}, (response) => { // Request the error to do something. You can use async await to do asynchronous operations
  console.log(response)
  if (response.config.custom.loading) {
    uni.hideLoading()
  }
  return Promise.reject(response)
})

// Single interface does not want to load
http.get('user/list', {custom: {loading: false}})
http.post('user/list', {}, {custom: {loading: false}})

Copy the code

Easy API design: Part of the API design is designed to reduce learning cost, refer to axios design. And extend some other apis to make it easier to get started.

.

Quick learning

npm
npm i luch-request -S
Copy the code

For CLI users to use the NPM package, add the following configuration items to create the vue.config.js file in the root directory

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

GitHub

Use the DCloud/ LucH-request folder

DCloud plug-in market

DCloud plug-in market

Luch – request website

Luch – request website

Update history

Update record

Key words:

  • Uni-app network request encapsulation
  • Uni. Request packaging
  • Uni – app request encapsulation