“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

I. Environment variable configuration

Create API folder, create global.js file, used to distinguish environment, Hbuilderx edit run is development environment, after release automatically switch to production environment.

Let baseUrl = '' if (process.env.node_env === 'development') {console.log(' development') baseUrl = 'http://localhost:3000'} Else {console.log(' production environment ') baseUrl = ''} export default {baseUrl}Copy the code

Uni. request Encapsulates network requests

Create request.js, import global.js, and write the encapsulation code. It includes request configuration, setting interceptor, initiating network request, and request mode configuration.

Import global. Js

import global from './global.js'
Copy the code

Config Common request configuration items:

  • baseURL: Base URL that will be automatically appended to the interface addressurlThe front.
  • header: Sets the header of the request. Referer cannot be set in the header.
  • dataType: Tell the server what type of data I want to think about. If set to JSON, a json.parse will be attempted on the returned data.
  • method: Request mode. The default isGET, valid values include:GET,POST,PUT,DELETE,CONNECTAnd so on.
  • responseType: Sets the data type of the response. Legal values:text,arraybuffer.
  • timeout: Timeout duration, expressed in ms.
  • data: Request parameters.
  • success: received a successful callback from the developer server.
  • fail: Callback function that failed to be invoked by the interface.
  • complete: callback function for the end of an interface call (executed on success or failure).

For more details, please refer to the official website

config {
    baseUrl: global.baseUrl,
    header: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'token'
    },
    dataType: "json",
    method: "GET",
    responseType: "json",
    success() {},
    fail() {},
    complete() {}
}
Copy the code

A promise-based network request

Due to the length of the article, this will be covered in detail in the next uni-APP Encapsulating network requests (below). Stay tuned.

Request encapsulation

With the network request defined above, when different requests are sent in the project, the request mode can be directly attached to complete the encapsulation code. Details are as follows:

Get request get(url, data, options) {if (! options) { options = {} } options.url = url options.data = data options.method = 'GET' return this.request(options) }, // post request post(url, data, options) {if (! options) { options = {} } options.url = url options.data = data options.method = 'POST' return this.request(options) }, Put request put(URL, data, options) {if (! options) { options = {} } options.url = url options.data = data options.method = 'PUT' return this.request(options) }, Delete request delete(url, data, options) {if (! options) { options = {} } options.url = url options.data = data options.method = 'DELETE' return this.request(options) }Copy the code

Specific use and request, will continue in the next article, please continue to pay attention to!!