ウィジェットwx-requestメソッドはaxios要求プラグインのようなものを作成します.
6336 ワード
プラグインの紹介
このプラグインはaxios作成を模倣し、
githubアドレス
miniprogram-http-request
インストール
プラグインの導入
要求は、関連する構成を
http Rquest(config)
便宜上、すべてのサポートのための要求方法に別名を提供します.
http Rquest.options(url[,config])
http Rquest.get(url[,config])
http Rquest.head(url[,config])
http Rquest.post(url[,config])
http Rquest.put(url[,config])
http Rquest.delete(url[,config])
http Rquest.trace(url[,config])
http Rquest.co nnect(url[,config])
要求の設定
これらは要求を作成する際に使用できる設定オプションです.必要なのは
ある要求の応答には以下の情報が含まれています.
要求または応答が
注意:ブロックは必ず戻ってきます.
return
cancel tokenを使って要求をキャンセルします.
このプラグインはaxios作成を模倣し、
promise
パッケージwx-request要求方法に基づいて、カスタム要求の構成、ブロッキング要求および応答、変換要求および応答データ、自動変換JSONデータをサポートする.githubアドレス
miniprogram-http-request
インストール
npm i miniprogram-http-request -S
ケースプラグインの導入
import httpRequest from 'miniprogram-http-request'
GET
要求httpRequest.get('/user?ID=12345')
.then((res) => {
console.log(res)
})
.catch((error) => {
console.log(error)
})
POST
要求httpRequest.post('/user', {
data: {
userid: 123,
name: 'sanwi'
}
})
.then((res) => {
console.log(res)
})
.catch((error) => {
console.log(error)
})
マージ要求httpRequest.all([
httpRequest.get('/user?ID=12345'),
httpRequest.post('/user', {
data: {
userid: 123,
name: 'sanwi'
}
})
])
.then((res) => {
console.log(res)
})
.catch((error) => {
console.log(error)
})
http Request-API要求は、関連する構成を
httpRequest
に渡すことによって作成されてもよい.http Rquest(config)
//POST
httptRquest({
method: 'post',
url: '/user',
data: {
userid: 123,
name: 'sanwi'
}
})
http Rquest(url[,config])//GET ( )
httptRquest('/user?ID=12345')
エイリアスの要求方法便宜上、すべてのサポートのための要求方法に別名を提供します.
http Rquest.options(url[,config])
http Rquest.get(url[,config])
http Rquest.head(url[,config])
http Rquest.post(url[,config])
http Rquest.put(url[,config])
http Rquest.delete(url[,config])
http Rquest.trace(url[,config])
http Rquest.co nnect(url[,config])
要求の設定
これらは要求を作成する際に使用できる設定オプションです.必要なのは
url
だけです.method
が指定されていない場合、要求はデフォルトでget
方法を使用する.{
//request url
baseURL: '',
//request data
data: {},
//timeout is not created
timeout: 0,
//request method
method: 'GET',
//receive data type
dataType: 'json',
//response data type
responseType: 'text',
//enable cache
enableCache: false,
//enable quic
enableQuic: false,
//enable Http2
enableHttp2: false,
//request headers
header: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/x-www-form-urlencoded',
},
//transform request data
transformRequest: [
(data) => {
normalizeHeaderNmae(headers, 'Accept');
normalizeHeaderNmae(headers, 'Content-Type');
return data
}
],
//transform response data
transformResponse: [
(data) => {
if(typeof data === 'string') {
try{
data = JSON.parse(data)
}catch(err){ /* ignore */ }
}
return data
}
],
//response status
validateStatus: status => status >= 200 && status < 300,
}
応答構造ある要求の応答には以下の情報が含まれています.
{
// `cookies`
cookies: [],
// `data`
data: {},
// `statusCode` HTTP
statusCode: 200,
// `errMsg` HTTP
errMsg: 'request:ok',
// `header`
header: {},
// `config`
config: {},
}
then
を使用すると、以下のような応答が受信されます.httpRequest.get('/user?ID=12345')
.then((res) => {
console.log(response.cookies);
console.log(response.data);
console.log(response.statusCode);
console.log(response.errMsg);
console.log(response.header);
console.log(response.config);
})
迎撃器要求または応答が
then
またはcatch
によって処理される前にそれらをブロックする.注意:ブロックは必ず戻ってきます.
return
//
httpRequest.interceptors.request.use(function (config) {
//
return config;
}, function (error) {
//
return Promise.reject(error);
});
//
httpRequest.interceptors.response.use(function (response) {
//
return response;
}, function (error) {
//
return Promise.reject(error);
});
後でブロックを除去したいなら、こうしてもいいです.const myInterceptor = httpRequest.interceptors.request.use(function () {/*...*/});
httpRequest.interceptors.request.eject(myInterceptor);
カスタムhttpRequest
例に対して、スクリーンセーバを追加することができます.const instance = httpRequest.create();
instance.interceptors.request.use(function () {/*...*/});
エラー処理httpRequest.get('/user/12345')
.catch(function (error) {
//Something happened in setting up the request that triggered an Error
console.log('Error', error.errMsg);
console.log(error.config);
});
validateStatus
を用いて、カスタムHTTP状態コードを定義するエラー範囲を選択するよう構成されている.httpRequest.get('/user/12345', {
validateStatus: function (status) {
return status < 500; // Reject only if the status code is greater than or equal to 500
}
})
要求をキャンセルするcancel tokenを使って要求をキャンセルします.
CancelToken.source
工場法を使用してcancel tokenを作成することができます.const CancelToken = httpRequest.CancelToken;
const source = CancelToken.source();
httpRequest.get('/user/12345', {
cancelToken: source.token
})
.catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
//
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// (message )
source.cancel('Operation canceled by the user.');
cancel tokenはまた、1つのexector関数をCancelToken
に伝達することによって作成され得る.const CancelToken = httpRequest.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor cancel
cancel = c;
})
});
// cancel the request
cancel();
注意:同じキャンセルキャンセルキャンセルキャンセルキャンセルキャンセルキャンセルキャンセルキャンセルすることができます.