How to modify the default request method in uniapp

With the continuous updating of front-end technology, more and more developers are beginning to try to use uniapp for development. This cross-platform development framework allows developers to only write one code and run it on multiple platforms. . However, when using uniapp for development, you may encounter some problems. For example, the default network request method may not be suitable for certain situations and needs to be modified. This article will introduce how to modify the default request method in uniapp.

The default network request method of uniapp is to use uni.request(), which is a method that encapsulates wx.request() and can be used on different platforms. This method uses a GET request by default, and you can change some configurations of the request, such as URL, request headers, etc. by passing parameters.

However, in actual development, we may need to use other request methods, such as POST, PUT, etc. At this time, we need to encapsulate uni.request() to support multiple request methods. The following is a sample code that uses Promise to encapsulate uni.request():

function request(url, method, data) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: url,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

This method accepts three parameters: URL, request method and request data, and returns a Promise object. In actual use, we can call this method and pass in the corresponding parameters to implement different request methods.

For example, if we need to use a POST request, we can call it like this:

request('http://example.com/api/user', 'POST', {username: 'admin', password: '123456'})
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })

Similarly, if we need to use a PUT request, we only need to change the request method to PUT.

In addition to modifying the request method, we can also modify the request headers and request parameters. For example, if you need to add token verification to all requests, you can modify the header parameters:

let token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'

uni.request({
  url: 'http://example.com/api',
  method: 'GET',
  header: {
    'Authorization': 'Bearer ' + token
  },
  success: res => {
    console.log(res.data)
  },
  fail: err => {
    console.error(err)
  }
})

This will add the Authorization parameter to the header of each request.

In addition to adding parameters in a single request, we can also modify the default parameters in the global configuration. uniapp provides a $https configuration parameter, which can be configured in the main.js file:

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

Vue.prototype.$https = uni.request
const baseUrl = 'http://example.com/api'

uni.$https.defaults.baseURL = baseUrl
uni.$https.defaults.header = {
  'content-type': 'application/json'
}

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

In the above code, we assign uni.request to Vue.prototype.$https. When using You can directly call $https to make network requests. We also added a defaults attribute to $https to save global default parameters, such as baseURL and header.

After modifying the default request method, we may encounter some problems, such as cross-domain requests being intercepted by the browser, which can be solved by configuring cross-domain access on the server; in addition, if an error occurs during the request Errors can be captured in catch and processed accordingly.

In short, uniapp provides a flexible network request method. In actual development, developers can freely choose different request methods and request parameters according to their needs to achieve more refined network request requirements.

The above is the detailed content of How to modify the default request method in uniapp. For more information, please follow other related articles on the PHP Chinese website!