swan.request

解释：发起网络请求，请参考使用注意事项swan.request - 图1进行开发。

方法参数

Object object

object参数说明 ：

属性名类型必填默认值说明最低支持版本
urlString是开发者服务器接口地址
dataObject/String否请求的参数
headerObject否设置请求的 header，header 中不能设置 Referer。
methodString否GET （大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE/CONNECT(仅 Android 支持)。
dataTypeString否json有效值：string,json。 如果设为 json，会尝试对返回的数据做一次 JSON.parse 。
responseTypeString否text设置响应的数据类型, 有效值：text、arraybuffer。1.11.20
successFunction否收到开发者服务成功返回的回调函数。
failFunction否接口调用失败的回调函数。
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）。

success 返回参数说明 ：

参数类型说明
dataObject/String开发者服务器返回的数据
statusCodeNumber开发者服务器返回的 HTTP 状态码
headerObject开发者服务器返回的 HTTP Response Header

fail 返回参数说明 ：

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

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)…）。

示例

扫码体验

swan.request - 图2请使用百度APP扫码

图片示例

swan.request - 图3

swan.request - 图4

swan.request - 图5

代码示例1 - post的header['content-type'] 为 application/json ：

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         swan.request({
  5.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  6.             header: {
  7.                 'content-type': 'application/json'
  8.             },
  9.             method: 'POST',
  10.             dataType: 'json',
  11.             responseType: 'text',
  12.             data: {
  13.                 key: 'value'
  14.             },
  15.             success: res => {
  16.                 console.log(res.data);
  17.             },
  18.             fail: err => {
  19.                 console.log('错误码：' + err.errCode);
  20.                 console.log('错误信息：' + err.errMsg);
  21.             }
  22.         });
  23.     }
  24. });

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

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         swan.request({
  5.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  6.             header: {
  7.                 'content-type': 'application/x-www-form-urlencoded'
  8.             },
  9.             method: 'POST',
  10.             dataType: 'json',
  11.             responseType: 'text',
  12.             data: {
  13.                 key: 'value'
  14.             },
  15.             success: res => {
  16.                 console.log(res.data);
  17.             },
  18.             fail: err => {
  19.                 console.log('错误码：' + err.errCode);
  20.                 console.log('错误信息：' + err.errMsg);
  21.             }
  22.         });
  23.     }
  24. });

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

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         let cuid = '';
  5.         swan.request({
  6.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  7.             header: {
  8.                 'content-type': 'application/x-www-form-urlencoded',
  9.                 'cookie': 'BAIDUCUID=' + cuid
  10.             },
  11.             method: 'POST',
  12.             dataType: 'json',
  13.             responseType: 'text',
  14.             data: {
  15.                 key: 'value'
  16.             },
  17.             success: res => {
  18.                 console.log(res.data);
  19.             },
  20.             fail: err => {
  21.                 console.log('错误码：' + err.errCode);
  22.                 console.log('错误信息：' + err.errMsg);
  23.             }
  24.         });
  25.     }
  26. });

代码示例4 - post的dataType为string ：

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         swan.request({
  5.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  6.             header: {
  7.                 'content-type': 'application/json'
  8.             },
  9.             method: 'POST',
  10.             dataType: 'string',
  11.             responseType: 'text',
  12.             data: {
  13.                 key: 'value'
  14.             },
  15.             success: res => {
  16.                 console.log(res.data);
  17.             },
  18.             fail: err => {
  19.                 console.log('错误码：' + err.errCode);
  20.                 console.log('错误信息：' + err.errMsg);
  21.             }
  22.         });
  23.     }
  24. });

代码示例5 - post的data为string ：

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: {
  3.         loading: false
  4.     },
  5.     request() {
  6.         this.setData('loading', true);
  7.         swan.request({
  8.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  9.             header: {
  10.                 'content-type': 'application/json'
  11.             },
  12.             method: 'POST',
  13.             dataType: 'json',
  14.             responseType: 'text',
  15.             data: '美食酒水',
  16.             success: res => {
  17.                 console.log('request success', res);
  18.                 swan.showModal({
  19.                     title: '请求到的数据',
  20.                     content: JSON.stringify(res.data.data),
  21.                     showCancel: false
  22.                 });
  23.             },
  24.             fail: err => {
  25.                 swan.showToast({
  26.                     title: JSON.stringify(err)
  27.                 });
  28.                 console.log('request fail', err);
  29.             },
  30.             complete: () => {
  31.                 this.setData('loading', false);
  32.                 console.log('request complete');
  33.             }
  34.         });
  35.     }
  36. });

代码示例6 - post的responseType为arraybuffer ：

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         swan.request({
  5.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  6.             header: {
  7.                 'content-type': 'application/json'
  8.             },
  9.             method: 'POST',
  10.             dataType: 'arraybuffer',// 一般会将返回数据转化为BASE64编码格式
  11.             responseType: 'text',
  12.             data: {
  13.                 key: 'value'
  14.             },
  15.             success: res => {
  16.                 console.log(res.data);
  17.             },
  18.             fail: err => {
  19.                 console.log('错误码：' + err.errCode);
  20.                 console.log('错误信息：' + err.errMsg);
  21.             }
  22.         });
  23.     }
  24. });

代码示例7 - get请求 ：

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         swan.request({
  5.             url: 'https://apis.baidu.com/heweather/weather/free?city=beijing',
  6.             method: 'GET', 
  7.             success: res => {
  8.                 console.log('request success', res);
  9.                 swan.showModal({
  10.                     title: '请求到的数据',
  11.                     content: JSON.stringify(res),
  12.                     showCancel: false
  13.                 });
  14.             },
  15.             fail: err => {
  16.                 swan.showToast({
  17.                     title: JSON.stringify(err)
  18.                 });
  19.                 console.log('request fail', err);
  20.             },
  21.             complete: () => {
  22.                 this.setData('loading', false);
  23.                 console.log('request complete');
  24.             }
  25.         });
  26.     }
  27. });

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

在开发者工具中预览效果

在 js 文件中

  1. Page({
  2.     data: { },
  3.     onLoad() {
  4.         this.requestTask = new Promise((resolve, reject) => {
  5.             const requestHandler = swan.request({
  6.                 url: '开发者服务器地址',
  7.                 header: {
  8.                     'content-type': 'application/json'
  9.                 },
  10.                 method: 'POST',
  11.                 dataType: 'json',
  12.                 responseType: 'text',
  13.                 data: {
  14.                     key: 'value'
  15.                 },
  16.                 success: res => {
  17.                     this.setData('data', res.data);
  18.                     resolve();
  19.                 },
  20.                 fail: err => {
  21.                     console.log('错误码：' + err.errCode);
  22.                     console.log('错误信息：' + err.errMsg);
  23.                 }
  24.             })
  25.         });
  26.     },
  27.     onShow() {
  28.         this.requestTask.then(requestData => {
  29.             let res = this.getData('data');
  30.             swan.setPageInfo({
  31.                 title: res.title,
  32.                 keywords: res.keywords,
  33.                 description: res.description,
  34.                 articleTitle: res.articleTitle,
  35.                 releaseDate: res.releaseDate,
  36.                 image: res.image,
  37.                 video: res.video,
  38.                 visit: res.visit,
  39.                 likes: '75',
  40.                 comments: '13',
  41.                 collects: '23',
  42.                 shares: '8',
  43.                 followers: '35',
  44.                 success: res => {
  45.                     console.log('setPageInfo success');
  46.                 },
  47.                 fail: err => {
  48.                     console.log('setPageInfo fail', err);
  49.                 }
  50.             })
  51.         })
  52.     }
  53. });

代码示例9 - post的method为PUT ：

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         swan.request({
  5.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  6.             header: {
  7.                 'content-type': 'application/json'
  8.             },
  9.             method: 'PUT',
  10.             dataType: 'json',
  11.             responseType: 'text',
  12.             data: {
  13.                 key: 'value'
  14.             },
  15.             success: res => {
  16.                 console.log(res.data);
  17.             },
  18.             fail: err => {
  19.                 console.log('错误码：' + err.errCode);
  20.                 console.log('错误信息：' + err.errMsg);
  21.             }
  22.         });
  23.     }
  24. });

代码示例10 - post的method为DELETE ：

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         swan.request({
  5.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  6.             header: {
  7.                 'content-type': 'application/json'
  8.             },
  9.             method: 'DELETE',
  10.             dataType: 'json',
  11.             responseType: 'text',
  12.             data: {
  13.                 key: 'value'
  14.             },
  15.             success: res => {
  16.                 console.log(res.data);
  17.             },
  18.             fail: err => {
  19.                 console.log('错误码：' + err.errCode);
  20.                 console.log('错误信息：' + err.errMsg);
  21.             }
  22.         });
  23.     }
  24. });

代码示例11 - post的method为HEAD ：

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         swan.request({
  5.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  6.             header: {
  7.                 'content-type': 'application/json'
  8.             },
  9.             method: 'HEAD',
  10.             dataType: 'json',
  11.             responseType: 'text',
  12.             data: {
  13.                 key: 'value'
  14.             },
  15.             success: res => {
  16.                 console.log(res.data);
  17.             },
  18.             fail: err => {
  19.                 console.log('错误码：' + err.errCode);
  20.                 console.log('错误信息：' + err.errMsg);
  21.             }
  22.         });
  23.     }
  24. });

代码示例12 - post的method为OPTIONS ：

在开发者工具中预览效果

  • 在 swan 文件中
  1. <button bindtap="request">点击请求数据</button>
  • 在 js 文件中
  1. Page({
  2.     data: { },
  3.     request() {
  4.         swan.request({
  5.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  6.             header: {
  7.                 'content-type': 'application/json'
  8.             },
  9.             method: 'OPTIONS',
  10.             dataType: 'json',
  11.             responseType: 'text',
  12.             data: {
  13.                 key: 'value'
  14.             },
  15.             success: res => {
  16.                 console.log(res.data);
  17.             },
  18.             fail: err => {
  19.                 console.log('错误码：' + err.errCode);
  20.                 console.log('错误信息：' + err.errMsg);
  21.             }
  22.         });
  23.     }
  24. });

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

  • 在 js 文件中
  1. var hasClick = false;
  3. Page({
  4.     tap: function() {
  5.         if (hasClick) {
  6.             return;
  7.         }
  8.         hasClick = true;
  9.         swan.showLoading()
  10.         swan.request({
  11.             url: 'xxx',
  12.             method: 'POST',
  13.             header: { 'content-type':'application/json' },
  14.             data: { },
  15.             success: function (res) {
  16.                 console.log(res.data);
  17.             },
  18.             fail: function (res) {
  19.                 swan.showToast({ title: '系统错误' });
  20.             },
  21.             complete: function (res) {
  22.                 swan.hideLoading()
  23.                 hasClick = false
  24.             }
  25.         })
  26.     }
  27. })

返回值 ：

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