How to implement network request encapsulation in uniapp

Uniapp is a cross-platform development framework, which is packaged based on Vue.js and can build iOS, Android and H5 applications at the same time. In actual development, network requests are an essential part. In order to improve development efficiency and code reusability, we can encapsulate network requests. This article will introduce in detail how to implement network request encapsulation in uniapp and provide corresponding code examples.

1. Create a network request encapsulation file
First, we need to create a network request encapsulation file (such as utils/request.js) to uniformly manage our requests. This file usually contains the following content:

1. Import the uni.request method required to encapsulate the request:

   import { request } from '@/uni_modules/uni-request/index.js';

   Note: When using uni.request, you need to install it The plug-in uni-request is officially recommended by uni-app.

2. Create a function that encapsulates requests:

   export function post(url, params) {
     return request({
    url: url,
    method: 'POST',
    data: params
     });
   }
   
   export function get(url, params) {
     return request({
    url: url,
    method: 'GET',
    data: params
     });
   }

   Here we encapsulate two methods, post and get, corresponding to POST and GET requests respectively. In actual development, other types of request methods can be added according to project requirements, such as PUT, DELETE, etc.

3. Export request module:

   export default {
     post,
     get
   }

2. Use encapsulated network requests
Where we need to send network requests, we can directly Call the method encapsulated in the previous step. The following is a simple example:

1. In the .vue file, import the request module:

   import request from '@/utils/request.js';

2. Call the encapsulated request method:

   request.post('/api/login', { username: 'admin', password: '123456' })
     .then(res => {
    console.log(res.data);
     })
     .catch(err => {
    console.error(err);
     });

   Here we call the encapsulated post method, send a login request, and pass in the username and password as request parameters. Different request methods can be called according to the actual needs of the project.

3. Other processing of encapsulated requests
In addition to simply sending requests, we can also perform some flexible processing. The following are some common processing methods:

1. Request interception: Before sending a request, you can add a request interceptor to uniformly process request parameters, add tokens, etc.

   request.interceptors.request.use(config => {
     config.header.Authorization = 'Bearer ' + uni.getStorageSync('token');
     return config;
   })

2. Response interception: After receiving the response, you can add a response interceptor to uniformly process the returned data, exceptions, etc.

   request.interceptors.response.use(response => {
     if (response.statusCode === 200) {
    return response.data;
     } else {
    Promise.reject('请求失败');
     }
   })

3. Error handling: Unified processing can be performed when an error occurs, such as popping up an error prompt box, etc.

   request.catch(err => {
     uni.showToast({
    title: err,
    icon: 'none'
     });
   })

These processing methods can be adapted and expanded according to actual needs.

Summary:
By encapsulating network requests in uniapp, we can achieve code reuse and improve development efficiency. When encapsulating, we can add functions such as request interception, response interception, and error handling according to actual needs to uniformly manage requests. Such encapsulation can make our code structure clearer and easier to maintain.

The above is an introduction and sample code on how to implement network request encapsulation in uniapp. I hope it will be helpful to you. In actual development, the package can be expanded and optimized according to the needs of the project.

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