Uniapp development unified configuration request address

With the popularity of mobile applications, developers need to gradually adapt to the development methods of different operating systems and measure how to develop faster and use resources more efficiently. Uniapp is a cross-platform framework that emerged as the times require. It can not only quickly build multi-terminal (H5, WeChat applet, App) applications, but also has the integrated integration of multiple commonly used libraries (such as vuex, uni-ui, etc.). During the development process of uniapp, many requests require network requests. A unified request address configuration can facilitate maintenance and upgrades. This article will introduce how to uniformly configure the request address from two aspects: uniapp development and axios request library.

1. Use of requests in uniapp

Requests in uniapp can also use the native XMLHttpRequest, but considering development efficiency, we usually choose a more easy-to-use request library ——uni-request. uni-request encapsulates XMLHttpRequest and uniapp's request, and can be processed using Promise. At the same time, uni-request also encapsulates a series of practical functions such as interceptors and retries. When using uni-request, we need to mount the $http object in main.js:

<code class="javascript">import request from '@/common/request.js'

Vue.prototype.$http = request</code>

Next, where a request needs to be made, you can directly call the method under the $http object to make a request. , for example:

<code class="javascript">this.$http.get('/api/user').then((res) => {
  console.log(res)
})</code>

2. Configure the request address

To configure the request address uniformly, the following two aspects need to be taken into consideration.

1. Overall configuration in uniapp

We usually encapsulate the request in a separate file for use. Requesting the configuration of an address in this file may be a relatively simple operation. We can add the following code in the request.js file:

<code class="javascript">const baseURL = 'https://your.base.url.com/api/'

export default function(options) {
  // function definition
  // ...
  return uni.request({
    url: baseURL + options.url,
    method: options.method || 'GET',
    data: options.data || {},
    header: options.header || {}
  })
}</code>

In this example, our baseURL is set to https://your.base.url.com/api/, which means that every time When making a request, this baseURL will be added in front of it. Therefore, when we call the request, we only need to call the relative address.

2. Global configuration in axios

In uniapp, we can also use axios to operate requests. Although less used during the development process, axios has more flexible and powerful interceptors and configuration items. It can be said that in actual usage scenarios, it will be more versatile than uni-request.

We can perform global configuration in the main.js file:

<code class="javascript">import axios from 'axios'

axios.defaults.baseURL = 'https://your.base.url.com/api/'
Vue.prototype.$http = axios</code>

In this way, in subsequent requests, this baseURL will also be followed.

3. Summary

This article introduces how to uniformly configure the request address in terms of axiso and uniapp. For developers, this is not only a traditional declarative routing, but also means more efficient team collaboration and more flexible control of business logic. I believe that after readers learn more about the requests in uniapp written by themselves, they will be able to easily implement a global request address coordination.

The above is the detailed content of Uniapp development unified configuration request address. For more information, please follow other related articles on the PHP Chinese website!