swan.request

Object object

使用缓存服务时 success 返回参数说明

参数	类型	说明
errno	String	缓存服务返回，非 “0” 表示失败
errmsg	String	缓存服务返回，”succ” 或者错误提示信息
logid	String	缓存服务返回，缓存服务的日志 ID
data	String	开发者服务器返回的数据，其中 data 为开发者服务 HTTP.Response.Body 进行 base64 编码后的数据
header	Object	开发者服务器返回的 HTTP Response Header
statusCode	Number	开发者服务器返回的 HTTP 状态码

返回示例如下：
JSON

未使用缓存服务时 success 返回参数说明

使用缓存服务时 fail 返回参数说明

参数	类型	说明
errno	String	缓存服务返回，非 “0” 表示失败
errmsg	String	缓存服务返回，”succ” 或者错误提示信息
logid	String	缓存服务返回，缓存服务的日志 ID

缓存服务错误码说明

返回示例如下：
JSON


    "errno":"400000",
    "errmsg":"invaild input",
    "logid":"352381125"
}

未使用缓存服务时 fail 返回参数说明

Android

错误码	说明
201	解析失败，请检查调起协议是否合法
1001	执行失败

data 数据说明

最终发送给服务器的数据都是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：
1、对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）；
2、对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会对数据进行 JSON 序列化；
3、对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）。

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例 1：使用了云端缓存服务能力

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">点击向服务器发起请求</view>
        <button bind:tap="request" type="primary" loading="{{loading}}" hover-stop-propagation="true">button</button>
        <view class="tip-week">将项目信息里的校验域名取消勾选可访问 ip 测试</view>
    </view>
</view>

Page({
    data: {
        loading: false
    },
    request() {
        this.setData('loading', true);
        swan.request({
            url: 'https://storage.smartapps.cn/shopping/nianhuo/bimai',
            header: {
                'Content-Type': 'application/json',
                'Developer-Server-Domain': 'https://sfc.baidu.com',
                'X-SP-Accept-Encoding': 'base64',
                'X-SP-Transfer-Encoding': '1'
            },
            method: 'POST',
            dataType: 'json',
            responseType: 'text',
            data: {
                tabname: '美食酒水'
            },
            success: res => {
                try {
                    console.log('request success', res);
                    swan.showModal({
                        title: '请求到的数据',
                        content: JSON.stringify(res.data),
                        showCancel: false
                    });
                }
                catch (error) {
                    console.log(error);
                }
            },
            fail: err => {
                swan.showToast({
                    title: JSON.stringify(err)
                });
                console.log('request fail', err);
            },
            complete: () => {
                this.setData('loading', false);
            }
        });
    }
});

在开发者工具中打开

SWAN
JS
REQUEST.JS

<view class="wrap">
    <view class="card-area">
        <view class="tip-strong">
            开发者接入使用此能力需要在开发者管理平台（https://smartprogram.baidu.com/developer/applist.html）配置开关后，按照 js 中标注引入
        </view>
        <view class="top-description border-bottom">点击向服务器发起请求</view>
        <button bind:tap="request" type="primary" loading="{{loading}}" hover-stop-propagation="true">button</button>
        <view class="tip-week">将项目信息里的校验域名取消勾选可访问 ip 测试</view>
    </view>
</view>

/**
 * 开发者原有的业务文件
 */
// 1、添加 util 文件里的 request.js，并在此引入
let util = require('../util/request.js');
Page({
    data: {
        loading: false
    },
    request() {
        // 2、将 swan.request 替换为 swan.requestStorage1，注：此处应防止 API 重名问题，注意设为唯一标识
        swan.requestStorage1 = util.requestStorage;
        swan.requestStorage1({
        // swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
            data: {
                tabname: '美食酒水'
            },
            header: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            dataType: 'JSON',
            responseType: 'text',
            success: res => {
                this.setData('loading', true);
                swan.showModal({
                    title: 'success',
                    content: JSON.stringify(JSON.parse(res.data).data)
                });
                console.log('request success', JSON.parse(res.data).data);
            },
            fail: err => {
                swan.showToast({
                    title: JSON.stringify(err)
                });
                console.log('request fail', err);
            },
            complete: () => {
                this.setData('loading', false);
                console.log('request complete');
            }
        });
    }
});

/**
 * 云端缓存 request 封装
 */
function requestStorage({url, header, success, fail, complete, ...param}) {
    const {oldHost, newHost} = parseUrl(url);
    // header 字段的添加
    const newHeader = Object.assign(header, {
        'Developer-Server-Domain': oldHost,
        'X-SP-Accept-Encoding': 'base64',
        'X-SP-Transfer-Encoding': '1'
    });
    swan.request({
        url: newHost,
        header: newHeader,
        success: function (res) {
            // server失败的话，会把statusCode设置为非200，这个时候走原开发者服务
            try {
                if (res.statusCode !== 200) {
                    throw new Error('server 缓存返回非正常http状态码:' + res.statusCode);
                }
            }
            catch (error) {
                console.log(error);
                swan.request({url, header, success, fail, complete, ...param});
            }
        },
        fail: function (err) {
            console.log('server 缓存返回失败，走原有 request 请求，错误信息为:', err);
            swan.request({url, header, success, fail, complete, ...param});
        },
        complete: function () {
            if (typeof complete === "function") {
                complete();
            }
        },
        ...param});
// 开发者域名的切割，切割规则可以根据开发者实际业务场景修改和完善，此处仅为示例
function parseUrl(url) {
    let urlArr = url.split('/');
    let oldHost = urlArr[0] + '//' + urlArr[2];
    let newHost = url.replace(/\/\/(.*?)\//, '//storage.smartapps.cn/');
    return {
        oldHost,
        newHost
    };
}
module.exports.requestStorage = requestStorage;

代码示例 3：post 的 header[‘content-type’] 为 application/json

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">点击向服务器发起请求</view>
        <button bind:tap="request" type="primary" loading="{{loading}}" hover-stop-propagation="true">请求</button>
        <view class="tip-week">将项目信息里的校验域名取消勾选可访问 ip 测试</view>
    </view>
</view>

Page({
    data: {
        loading: false
    },
    request() {
        this.setData('loading', true);
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', 
            data: {
                tabname: '美食酒水'
            },
            header: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            dataType: 'JSON',
            responseType: 'text',
            success: res => {
                console.log('request success', res);
                swan.showModal({
                    title: '请求到的数据',
                    content: JSON.stringify(JSON.parse(res.data).data),
                    showCancel: false
                });
            },
            fail: err => {
                swan.showToast({
                    title: JSON.stringify(err)
                });
                console.log('request fail', err);
            },
            complete: () => {
                this.setData('loading', false);
            }
        });
    }
});

代码示例 4：post 的 header[‘content-type’] 为 application/x-www-form-urlencoded

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

代码示例 5：post 的 header 中携带 cookie

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

Page({
    request() {
        let cuid = '';
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', 
            header: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'cookie': 'BAIDUCUID=' + cuid
            },
            method: 'POST',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg);
            }
        });
    }
});

代码示例 6：post 的 dataType 为 string

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

Page({
    request() {
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', 
            header: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            dataType: 'string',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg);
            }
        });
    }
});

代码示例 7：post 的 data 为 string

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

Page({
    data: {
        loading: false
    },
    request() {
        this.setData('loading', true);
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', 
            header: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            dataType: 'json',
            responseType: 'text',
            data: '美食酒水',
            success: res => {
                console.log('request success', res);
                swan.showModal({
                    title: '请求到的数据',
                    content: JSON.stringify(res.data.data),
                    showCancel: false
                });
            },
            fail: err => {
                swan.showToast({
                    title: JSON.stringify(err)
                });
                console.log('request fail', err);
            },
            complete: () => {
                this.setData('loading', false);
            }
        });
});

代码示例 8：post 的 responseType 为 arraybuffer

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

Page({
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', 
            header: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            // 一般会将返回数据转化为BASE64编码格式
            dataType: 'json',
            responseType: 'arraybuffer',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg);
            }
        });
    }
});

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

代码示例 10：post 的 method 为 PUT

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

Page({
    request() {
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', 
            header: {
                'Content-Type': 'application/json'
            },
            method: 'PUT',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg);
            }
        });
    }
});

代码示例 11：post 的 method 为 DELETE

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

Page({
    request() {
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', 
            header: {
                'Content-Type': 'application/json'
            },
            method: 'DELETE',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg);
            }
        });
    }
});

代码示例 12：post 的 method 为 HEAD

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

Page({
    request() {
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', 
            header: {
                'Content-Type': 'application/json'
            },
            method: 'HEAD',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg);
            }
        });
    }
});

代码示例 13：post 的 method 为 OPTIONS

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<button bindtap="request">点击请求数据</button>

Page({
    request() {
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
            header: {
                'Content-Type': 'application/json'
            },
            method: 'OPTIONS',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg);
            }
        });
    }
});

返回值：

返回一个 requestTask 对象，通过 requestTask ，可中断请求任务。

代码示例 14：防止用户快速点击，多次请求（加锁）

let hasClick = false;
Page({
    tap() {
        if (hasClick) {
            return;
        }
        hasClick = true;
        swan.showLoading();
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
            method: 'POST',
            header: {
                'Content-Type':'application/json'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                swan.showToast({ title: '系统错误' });
            },
            complete: () => {
                swan.hideLoading();
                hasClick = false;
            }
        })
    }

代码示例 15：promise 写法保障 request 的请求顺序

在开发者工具中打开

Q：request 请求在 iOS 端会进入 fail 回调函数的原因有哪些？

A：请查看 url 中是否出现了中文，如需要使用中文字符，请对中文字符进行 encodeURIComponent 。