uniapp encapsulates a network request service, including interceptors, request headers, etc., suitable for Douyin applets and various applets.

When I used uniapp to write the Douyin applet today, I found that the Douyin applet does not support axios (maybe I don’t know how to play it), so it is always possible to use the request method provided by uniapp. After all, uniapp is so friendly to small programs. I really didn't say it. It is too troublesome to write a set of request codes for each request, let's encapsulate a service. Go directly to the code, let’s call the following file http.js, the comments inside are also very clear, you can ctrl cv with your hand:

const BASE_URL = 'https://用你自己的url替换'; // 设置基本请求 URL

const requestInterceptor = (config) => {
    // 添加请求拦截逻辑
    // 在这里可以对请求进行处理，例如添加请求头、签名等
    config.header = {
        ...config.header
    };
    return config;
};

const responseInterceptor = (response) => {
    // 添加响应拦截逻辑
    // 在这里可以对响应进行处理，例如处理错误码、数据解析等
    if (response.statusCode === 200) {
        return response.data;
    } else {
        throw new Error('Request failed with status code ' + response.statusCode);
    }
};


const request = (config) => {
    const requestConfig = {
        ...config,
        header: requestInterceptor(config).header,
        url: BASE_URL + config.url,
    };

    return new Promise((resolve, reject) => {
        uni.request({
            ...requestConfig,
            success: (res) => {
                try {
                    const responseData = responseInterceptor(res);
                    resolve(responseData);
                } catch (error) {
                    reject(error);
                }
            },
            fail: (err) => {
                reject(err);
            },
        });
    });
};

export const get = (url, params = {}) => {
    const config = {
        url,
        method: 'GET',
        data: params,
    };

    return request(config);
};

export const post = (url, data = {}) => {
    const config = {
        url,
        method: 'POST',
        data,
    };

    return request(config);
};

cv can be used directly in the future:

import { get, post } from '@/http.js';

// 发送 GET 请求
get('/users', { id: 1 })
  .then((response) => {
    // 处理成功的响应
  })
  .catch((error) => {
    // 处理请求错误
  });

// 发送 POST 请求
post('/users', { name: 'John', age: 25 })
  .then((response) => {
    // 处理成功的响应
  })
  .catch((error) => {
    // 处理请求错误
  });

Of course, if you use vue, you can mount the get and post methods on the Vue instance prototype in main.js for global use, so you don't need to import everywhere.

The tt object in the Douyin applet document can be replaced by the uni object, and the method called by the tt object can be called by uni

Off-topic: There is relatively little information on the development of small programs. Let me talk about the content of small programs. The Douyin small program is actually similar to the WeChat small program. After all, the WeChat small program is the originator of all programs of all sizes. Development, although the performance of uniapp is not as good as native Android ios or flutter applications, but in terms of cross-platform and development efficiency, uniapp that supports Vue is much stronger. Developing a set of codes can package various small programs, Android, h5, and ios at the same time (need to use mac os packaging), etc., in this respect, his efficiency is very high. As for some people scolding uniapp for all disgusting advertisements, I think this is normal. At least from one aspect, it also reflects that life is not easy for developers, and it is already open source. , You also have to rely on advertising fees to earn some money. This is completely understandable and can even be supported. Many market plug-ins can be used for free after viewing an advertisement. It is very good and I am willing to support good products.

If there are more needs for small programs, I will publish some introductory tutorials for uni small programs later.