swan.request

解释:发起网络请求,请参考使用注意事项进行开发。

# 方法参数

Object object

# object参数说明 :

属性名 类型 必填 默认值 说明 最低支持版本 Web 态说明
url String 开发者服务器接口地址
data Object/String 请求的参数
header Object 设置请求的 header,header 中不能设置 Referer。
method String GET (大写) 有效值:OPTIONS、GET、HEAD、POST、PUT、DELETE、 TRACE/CONNECT(仅 Android 支持)。 有效值:HEAD、GET、POST、PUT、DELETE
dataType String json 有效值:string、json。 如果设为 json,会尝试对返回的数据做一次 JSON.parse 。
responseType String text 设置响应的数据类型, 有效值:text、arraybuffer。 1.11.20
success Function 收到开发者服务成功返回的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

# success 返回参数说明 :

参数 类型 说明
data Object/String 开发者服务器返回的数据
statusCode Number 开发者服务器返回的 HTTP 状态码
header Object 开发者服务器返回的 HTTP Response Header

# fail 返回参数说明 :

  • Android
错误码 说明
201 解析失败,请检查调起协议是否合法  
1001 执行失败
  • iOS
错误码 说明
202 解析失败,请检查调起协议是否合法
errorCode为4 URL无效

# 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 - post的header['content-type'] 为 application/json :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
            header: {
                'content-type': 'application/json'
            },
            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);
            }
        });
    }
});

# 代码示例2 - post的header['content-type'] 为 application/x-www-form-urlencoded :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            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);
            }
        });
    }
});

# 代码示例3 - post的header中携带cookie :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    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);
            }
        });
    }
});

# 代码示例4 - post的dataType为string :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    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);
            }
        });
    }
});

# 代码示例5 - post的data为string :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
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);
                console.log('request complete');
            }
        });
    }
});

# 代码示例6 - post的responseType为arraybuffer :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
            header: {
                'content-type': 'application/json'
            },
            method: 'POST',
            dataType: 'arraybuffer',// 一般会将返回数据转化为BASE64编码格式
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('错误码:' + err.errCode);
                console.log('错误信息:' + err.errMsg);
            }
        });
    }
});

# 代码示例7 - get请求 :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    request() {
        swan.request({
            url: 'https://apis.baidu.com/heweather/weather/free?city=beijing',
            method: 'GET',
            success: res => {
                console.log('request success', res);
                swan.showModal({
                    title: '请求到的数据',
                    content: JSON.stringify(res),
                    showCancel: false
                });
            },
            fail: err => {
                swan.showToast({
                    title: JSON.stringify(err)
                });
                console.log('request fail', err);
            },
            complete: () => {
                this.setData('loading', false);
                console.log('request complete');
            }
        });
    }
});

# 代码示例8 - promise写法保障request的请求顺序 :

在开发者工具中预览效果

在 js 文件中

Page({
    data: { },
    onLoad() {
        this.requestTask = new Promise((resolve, reject) => {
            const requestHandler = swan.request({
                url: '开发者服务器地址',
                header: {
                    'content-type': 'application/json'
                },
                method: 'POST',
                dataType: 'json',
                responseType: 'text',
                data: {
                    key: 'value'
                },
                success: res => {
                    this.setData('data', res.data);
                    resolve();
                },
                fail: err => {
                    console.log('错误码:' + err.errCode);
                    console.log('错误信息:' + err.errMsg);
                }
            })
        });
    },
    onShow() {
        this.requestTask.then(requestData => {
            let res = this.getData('data');
            swan.setPageInfo({
                title: res.title,
                keywords: res.keywords,
                description: res.description,
                articleTitle: res.articleTitle,
                releaseDate: res.releaseDate,
                image: res.image,
                video: res.video,
                visit: res.visit,
                likes: '75',
                comments: '13',
                collects: '23',
                shares: '8',
                followers: '35',
                success: res => {
                    console.log('setPageInfo success');
                },
                fail: err => {
                    console.log('setPageInfo fail', err);
                }
            })
        })
    }
});

# 代码示例9 - post的method为PUT :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    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);
            }
        });
    }
});

# 代码示例10 - post的method为DELETE :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    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);
            }
        });
    }
});

# 代码示例11 - post的method为HEAD :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    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);
            }
        });
    }
});

# 代码示例12 - post的method为OPTIONS :

在开发者工具中预览效果

  • 在 swan 文件中
<button bindtap="request">点击请求数据</button>
  • 在 js 文件中
Page({
    data: { },
    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);
            }
        });
    }
});

# 代码示例13 - 防止用户快速点击,多次请求(加锁) :

  • 在 js 文件中
var hasClick = false;

Page({
    tap: function() {
        if (hasClick) {
            return;
        }
        hasClick = true;
        swan.showLoading()
        swan.request({
            url: 'xxx',
            method: 'POST',
            header: { 'content-type':'application/json' },
            data: { },
            success: function (res) {
                console.log(res.data);
            },
            fail: function (res) {
                swan.showToast({ title: '系统错误' });
            },
            complete: function (res) {
                swan.hideLoading()
                hasClick = false
            }
        })
    }
})

返回值 :

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

# 常见问题

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

A:请查看 url 中是否出现了中文,如需要使用中文字体,请对中文字符进行 encodeURIComponent

# Q:swan.request 成功后如何刷新页面?

A:当刷新页面指的是想更新部分模块的数据时,可以在接口请求成功后,使用 setData 将获取到的数据进行重置。