百度智能小程序 發(fā)起網(wǎng)絡(luò)請(qǐng)求

swan.request

解釋：發(fā)起網(wǎng)絡(luò)請(qǐng)求，請(qǐng)參考使用注意事項(xiàng)進(jìn)行開發(fā)。

方法參數(shù)

Object object

object參數(shù)說明

success 返回參數(shù)說明

fail 返回參數(shù)說明

• Android

• iOS

data 數(shù)據(jù)說明

最終發(fā)送給服務(wù)器的數(shù)據(jù)都是 String 類型，如果傳入的 data 不是 String 類型，會(huì)被轉(zhuǎn)換成 String 。轉(zhuǎn)換規(guī)則如下：1、對(duì)于 GET 方法的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）；

2、對(duì)于 POST 方法且 header[‘content-type’] 為 application/json 的數(shù)據(jù)，會(huì)對(duì)數(shù)據(jù)進(jìn)行 JSON 序列化；

3、對(duì)于 POST 方法且 header[‘content-type’] 為 application/x-www-form-urlencoded 的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）。

示例

圖片示例

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

在開發(fā)者工具中打開

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">點(diǎn)擊向服務(wù)器發(fā)起請(qǐng)求</view>
        <button bind:tap="request" type="primary" loading="{{loading}}" hover-stop-propagation="true">請(qǐng)求</button>
        <view class="tip-week">將項(xiàng)目信息里的校驗(yàn)域名取消勾選可訪問ip測(cè)試</view>
    </view>
</view>

Page({
    data: {
        loading: false
    },
    request() {
        this.setData('loading', true);
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            data: {
                tabname: '美食酒水'
            },
            header: {
                'content-type': 'application/json'
            },
            method: 'POST',
            dataType: 'JSON',
            responseType: 'text',
            success: res => {
                console.log('request success', res);
                swan.showModal({
                    title: '請(qǐng)求到的數(shù)據(jù)',
                    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);
            }
        });
    }
});

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

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            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('錯(cuò)誤碼：' + err.errCode);
                console.log('錯(cuò)誤信息：' + err.errMsg);
            }
        });
    }
});

代碼示例 3： post 的 header 中攜帶 cookie

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    request() {
        let cuid = '';
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            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('錯(cuò)誤碼：' + err.errCode);
                console.log('錯(cuò)誤信息：' + err.errMsg);
            }
        });
    }
});

代碼示例 4： post 的 dataType 為 string

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            header: {
                'content-type': 'application/json'
            },
            method: 'POST',
            dataType: 'string',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('錯(cuò)誤碼：' + err.errCode);
                console.log('錯(cuò)誤信息：' + err.errMsg);
            }
        });
    }
});

代碼示例 5： post 的 data 為 string

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    data: {
        loading: false
    },
    request() {
        this.setData('loading', true);
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            header: {
                'content-type': 'application/json'
            },
            method: 'POST',
            dataType: 'json',
            responseType: 'text',
            data: '美食酒水',
            success: res => {
                console.log('request success', res);
                swan.showModal({
                    title: '請(qǐng)求到的數(shù)據(jù)',
                    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);
            }
        });
    }
});

代碼示例 6： post 的 responseType 為 arraybuffer

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            header: {
                'content-type': 'application/json'
            },
            method: 'POST',
            dataType: 'arraybuffer',// 一般會(huì)將返回?cái)?shù)據(jù)轉(zhuǎn)化為BASE64編碼格式
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('錯(cuò)誤碼：' + err.errCode);
                console.log('錯(cuò)誤信息：' + err.errMsg);
            }
        });
    }
});

代碼示例 7： get 請(qǐng)求

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            method: 'GET', 
            success: res => {
                console.log('request success', res);
                swan.showModal({
                    title: '請(qǐng)求到的數(shù)據(jù)',
                    content: JSON.stringify(res),
                    showCancel: false
                });
            },
            fail: err => {
                swan.showToast({
                    title: JSON.stringify(err)
                });
                console.log('request fail', err);
            },
            complete: () => {
                this.setData('loading', false);
            }
        });
    }
});

代碼示例 8： post 的 method 為 PUT

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            header: {
                'content-type': 'application/json'
            },
            method: 'PUT',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('錯(cuò)誤碼：' + err.errCode);
                console.log('錯(cuò)誤信息：' + err.errMsg);
            }
        });
    }
});

代碼示例 9： post 的 method 為 DELETE

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            header: {
                'content-type': 'application/json'
            },
            method: 'DELETE',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('錯(cuò)誤碼：' + err.errCode);
                console.log('錯(cuò)誤信息：' + err.errMsg);
            }
        });
    }
});

代碼示例 10： post 的 method 為 HEAD

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            header: {
                'content-type': 'application/json'
            },
            method: 'HEAD',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('錯(cuò)誤碼：' + err.errCode);
                console.log('錯(cuò)誤信息：' + err.errMsg);
            }
        });
    }
});

代碼示例 11： post 的 method 為 OPTIONS

在開發(fā)者工具中打開

<button bindtap="request">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>

Page({
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            header: {
                'content-type': 'application/json'
            },
            method: 'OPTIONS',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                console.log('錯(cuò)誤碼：' + err.errCode);
                console.log('錯(cuò)誤信息：' + err.errMsg);
            }
        });
    }
});

返回值 ：
返回一個(gè) requestTask 對(duì)象，通過 requestTask，可中斷請(qǐng)求任務(wù)。

參考示例

參考示例 1： 防止用戶快速點(diǎn)擊,多次請(qǐng)求（加鎖）

let hasClick = false;

Page({
    tap() {
        if (hasClick) {
            return;
        }
        hasClick = true;
        swan.showLoading();
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai', // 僅為示例，并非真實(shí)的接口地址
            method: 'POST',
            header: {'content-type':'application/json'},
            success: res => {
                console.log(res.data);
            },
            fail: err => {
                swan.showToast({ title: '系統(tǒng)錯(cuò)誤' });
            },
            complete: () => {
                swan.hideLoading();
                hasClick = false;
            }
        })
    }
})

參考示例 2： promise 寫法保障 request 的請(qǐng)求順序 

在開發(fā)者工具中打開

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('錯(cuò)誤碼：' + err.errCode);
                    console.log('錯(cuò)誤信息：' + 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 請(qǐng)求在 iOS 端會(huì)進(jìn)入 fail 回調(diào)函數(shù)的原因有哪些

A：請(qǐng)查看 url 中是否出現(xiàn)了中文，如需要使用中文字符，請(qǐng)對(duì)中文字符進(jìn)行 encodeURIComponent。