• 111861

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

基于Promise封装uni-app的request方法,实现类似axios形式的请求

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

uni-request

基于Promise封装uni-app的request方法,h5和小程序均可使用

特别之处

  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换为JSON数据
  • 超时请求
  • 告别callback
  • 支持默认请求前缀
  • 支持并发请求

使用方式

uni-app框架中

安装(项目根目录下运行)

npm install uni-request --save

文件中引用

import uniRequest from 'uni-request';

使用方法

请求方法的别名

uniRequest.request(config)
uniRequest.get(url[, config])
uniRequest.delete(url[, config])
uniRequest.head(url[, config])
uniRequest.options(url[, config])
uniRequest.post(url[, data[, config]])
uniRequest.put(url[, data[, config]])
uniRequest.patch(url[, data[, config]])

全局配置

uniRequest.defaults.baseURL = 'https://yourapi.domain.com';
uniRequest.defaults.headers.common['Authorization'] = AUTH_TOKEN;
uniRequest.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

发送get请求

// 向具有给定ID的用户发出请求
uniRequest.get('/user?id=12345')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

// 可选地,上面的请求也可以按照
uniRequest.get('/user', {
    data: {
        id: 'number'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 想要使用 async/await? 将`async`关键字添加到外部函数/method
async function getUser() {
    try {
        const response = await uniRequest.get('/user?ID=12345');
        console.log(response);
    } catch (error) {
        console.error(error);
    }
}

发送post请求

uniRequest.post('/user', {   
        firstname : 'firstname',
        lastname : 'lastname'    
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

以上就是基本用法,如果掌握了就可以使用了uni-request


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客