• swan.request
  • 方法参数
    • object 参数说明
    • 使用缓存服务时 success 返回参数说明
    • 未使用缓存服务时 success 返回参数说明
    • 使用缓存服务时 fail 返回参数说明
    • 未使用缓存服务时 fail 返回参数说明
  • 示例
    • 图片示例
    • 代码示例 1：使用了云端缓存服务能力
    • 代码示例 2：云端缓存服务能力接入开发者服务
    • 代码示例 3：post 的 header[‘content-type’] 为 application/json
    • 代码示例 4：post 的 header[‘content-type’] 为 application/x-www-form-urlencoded
    • 代码示例 5：post 的 header 中携带 cookie
    • 代码示例 6：post 的 dataType 为 string
    • 代码示例 7：post 的 data 为 string
    • 代码示例 8：post 的 responseType 为 arraybuffer
    • 代码示例 9：post 的 method 为 GET
    • 代码示例 10：post 的 method 为 PUT
    • 代码示例 11：post 的 method 为 DELETE
    • 代码示例 12：post 的 method 为 HEAD
    • 代码示例 13：post 的 method 为 OPTIONS
    • 代码示例 14：防止用户快速点击，多次请求（加锁）
    • 代码示例 15：promise 写法保障 request 的请求顺序
  • 常见问题
    • Q：request 请求在 iOS 端会进入 fail 回调函数的原因有哪些？

swan.request

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

方法参数

Object object

object 参数说明

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

• 返回示例如下：

• JSON

 


  
{

  
 "errno":"0",

  
 "errmsg":"succ",

  
 "logid":"64295237",

  
 "data":"eyJkYXRhIjp7ImFwcF9saXN0IjpbeyJuYW1lIjoi6L+Z5piv5LiA5Liq5byA5Y+R6ICFc2VydmVy6L+U5Zue56S65L6LIn1dfSwiZXJybXNnIjoic3VjYyIsImVycm5vIjoiMCIsInJlcXVlc3RfaWQiOiIxMDI4MDkxODIiLCJ0aXBtc2ciOiIifQ==",

  
 "header":{

  
 "Content-Type":[

  
 "text/html"

  
 ],

  
 "Date":[

  
 "Thu, 10 Sep 2020 13:01:04 GMT"

  
 ],

  
 "P3p":[

  
 "CP=" OTI DSP COR IVA OUR IND COM "",

  
 "CP=" OTI DSP COR IVA OUR IND COM ""

  
 ],

  
 "Server":[

  
 "Apache"

  
 ],

  
 "Tracecode":[

  
 "00644508330215533322091021",

  
 "00644508330915916554091021"

  
 ],

  
 "Vary":[

  
 "Accept-Encoding"

  
 ]

  
 }

  
}

 

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

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

• 缓存服务错误码说明

• 返回示例如下：

• JSON

 


  
{

  
 "errno":"400000",

  
 "errmsg":"invaild input",

  
 "logid":"352381125"

  
}

 

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

• Android

• iOS

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);

  
 }

  
 });

  
 }

  
});

 

代码示例 2：云端缓存服务能力接入开发者服务

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• 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);

  
 }

  
 success(res);

  
 }

  
 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>

 

 


  
Page({

  
 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);

  
 }

  
 });

  
 }

  
});

 

代码示例 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);

  
 }

  
 });

  
 }

  
});

 

代码示例 9：post 的 method 为 GET

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 


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

 

 


  
Page({

  
 request() {

  
 swan.request({

  
 // 仅为示例，并非真实的接口地址

  
 url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', 

  
 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);

  
 }

  
 });

  
 }

  
});

 

代码示例 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：防止用户快速点击，多次请求（加锁）

• JS

 


  
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 的请求顺序

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• JS

 


  
Page({

  
 onLoad() {

  
 this.requestTask = new Promise((resolve, reject) => {

  
 const requestHandler = 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 => {

  
 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', res);

  
 },

  
 fail: err => {

  
 console.log('setPageInfo fail', err);

  
 }

  
 })

  
 })

  
 }

  
});

 

常见问题

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

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