What is the way to encapsulate and send requests in uniapp?

With the continuous development of front-end development, front-end frameworks are becoming more and more diverse. Among them, the rise of the uni-app framework has attracted widespread attention from front-end developers. Because it has many functions that are only available in native development, such as no need for repeated packaging, multi-end publishing, etc.

During the uni-app development process, we often need to make network requests. In order to facilitate code reuse and writing, we usually encapsulate the request method. Next, I will share how to use the uni-app framework to encapsulate the method of sending requests.

1. Encapsulating axios

axios is a modern, Promise-based HTTP library. It is the basic library for encapsulating network requests and responses in the uni-app framework. We can use the axios interceptor to uniformly add request headers, request parameters, response interception and other operations. The following is a code example for encapsulating axios:

import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://api.xxx.com', // 请求基础路径
    timeout: 10000 // 超时时长
});

// 添加请求拦截器
instance.interceptors.request.use(
    config => {
        // 添加请求头
        config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 添加响应拦截器
instance.interceptors.response.use(
    response => {
        return response.data;
    },
    error => {
        return Promise.reject(error);
    }
);

export default instance;

2. Encapsulating the request method

In the encapsulation request method When doing this, we should consider the request methods and parameter formats in various situations. The following is a sample code for encapsulating the request method:

import axios from './axios';

export const get = (url, data) => {
  return new Promise((resolve, reject) => {
    axios
      .get(url, { params: data })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
};

export const post = (url, data) => {
  return new Promise((resolve, reject) => {
    axios
      .post(url, data)
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
};

3. Call the encapsulated method

After we complete the above encapsulation, we can directly call the encapsulated method where we need to use it. The following is a sample code for calling the method:

import { get, post } from './request'; // 导入封装的请求方法

get('/api/news', { page: 1, pageSize: 10 }).then(data => {
  console.log(data);
});

post('/api/login', { username: 'xxx', password: 'xxx' }).then(data => {
  console.log(data);
});

In summary, in the uni-app development process, encapsulating the request method is a very basic but very practical skill. Through the above sample code, you can master how to encapsulate axios, request methods and calling methods, so as to develop uni-app more efficiently.

The above is the detailed content of What is the way to encapsulate and send requests in uniapp?. For more information, please follow other related articles on the PHP Chinese website!