uniapp封装一个网络请求的服务,包括拦截器,请求头等,适用于抖音小程序,各种小程序。

今天用uniapp写抖音小程序的时候,发现抖音小程序不支持axios(也许是我不会玩哈),那使用uniapp提供的请求方式总是可以的,毕竟uniapp对于小程序的友好度那是真没的说呀。那每个请求都写一套请求代码也太麻烦了,封装一个服务吧。直接上代码,我们把下面这个文件叫做http.js吧,里面的注释也很明白,伸手就能ctrl c v:

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以后就能直接用:

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) => {
    // 处理请求错误
  });

当然如果用vue的话,你可以将get和post这两个方法在main.js挂载到Vue实例原型上以供全局使用,就不用到处import了。

抖音小程序文档中的tt对象都可以用uni对象来替换,用tt对象调用的方法都可以用uni调用

题外话:小程序开发的资料比较少,多说一句小程序的内容,抖音小程序其实和微信小程序差不多,微信小程序毕竟是各大小程序的鼻祖,大同小异,所以也是推荐大家直接用uniapp开发,虽然uniapp性能上不如原生安卓ios或者flutter应用,但是论跨平台和开发效率,还是支持vue的uniapp要强很多,开发一套代码可以同时打包各个小程序、安卓、h5、ios(需要使用mac os打包)等,在这个方面,他的效率很高的,至于有人骂uniapp全是恶心人的广告啥的,我觉得这很正常,至少从一个方面也是反应了开发者也是生活不易,已然开源,也还得靠广告费挣点钱,这个是完全可以理解甚至是可以支持一把的,很多市场插件也都是看一个广告就能免费用了,挺好的,好的产品愿意支持。

如果小程序的需求比较多,我后面会出一些uni小程序的入门教程。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中,可以使用uni.request来发起请求,并且可以通过拦截器来实现请求拦截。 具体步骤如下: 1. 创建一个封装请求类,例如Request.js。 2. 在Request.js中定义拦截器。 ``` // Request.js export default class Request { constructor() { this.interceptors = { request: (config) => { // 在请求发送之前做些什么 return config; }, response: (response) => { // 对响应数据做些什么 return response; }, }; } // 发起请求 async sendRequest(config) { // 请求拦截器 if (this.interceptors.request) { config = this.interceptors.request(config); } let response = await uni.request(config); // 响应拦截器 if (this.interceptors.response) { response = this.interceptors.response(response); } return response; } // 设置请求拦截器 setRequestInterceptors(callback) { this.interceptors.request = callback; } // 设置响应拦截器 setResponseInterceptors(callback) { this.interceptors.response = callback; } } ``` 3. 在需要发送请求的页面中引入Request.js,并实例化一个Request对象。 ``` import Request from '@/common/Request.js'; const request = new Request(); // 设置请求拦截器 request.setRequestInterceptors((config) => { // 在请求发送之前做些什么 return config; }); // 设置响应拦截器 request.setResponseInterceptors((response) => { // 对响应数据做些什么 return response; }); // 发送请求 request.sendRequest({ url: 'http://example.com/api', method: 'GET', }).then((response) => { console.log(response.data); }).catch((error) => { console.log(error); }); ``` 通过这种方式,就可以在小程序封装请求拦截了。可以根据具体需求来定义拦截器中的处理逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值