Vue Promiseのaxiosパッケージの詳細を要求します。
今はほとんどの会社が前後に分かれているはずです。ソ、データ要求のパッケージはまだ必要です。
iosのblockパッケージに要求する非同期の効果を実現するために、JavaScriptのpromiseというオブジェクトを採用します。
下を見続けると、上のコードが続きます。
第二種
これらはパッケージの基本です。具体的な応用を見てみます。
axiosに基づく要求パッケージ
iosのblockパッケージに要求する非同期の効果を実現するために、JavaScriptのpromiseというオブジェクトを採用します。
var p1 = New promise((resolve,reject)=>{
var timeOut = Math.random() * 2;
log('set timeout to: ' + timeOut + ' seconds.');
setTimeout(function () {
if (timeOut < 1) {
log('call resolve()...');
resolve('200 OK');
}
else {
log('call reject()...');
reject('timeout in ' + timeOut + ' seconds.');
}
}, timeOut * 1000);
})
その中でreolveはrejectと同じです。二つのblockを定義してデータを送ります。下を見続けると、上のコードが続きます。
var p2 = p1.then(function (result) { //resolve
console.log(' :' + result);
});
var p3 = p2.catch(function (reason) { //reject
console.log(' :' + reason);
});
資料を見ると、他の2つの使い方が分かります。Promise.allとPromise.raceの2つです。
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
// p1 p2, then:
Promise.all([p1, p2]).then(function (results) {
console.log(results); // Array: ['P1', 'P2']
});
これはp 1とp 2の両方がデータを返して、allの後のthen関数を実行します。iosの中のGCDのnotify関数に似ています。第二種
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
console.log(result); // 'P1'
});
走るという意味で、走るのが速いのを見て、走るのが遅いのは捨てられました。これらはパッケージの基本です。具体的な応用を見てみます。
axiosに基づく要求パッケージ
//
const ajaxUrl = env === 'development' ?
'https://www.baidu.com' :
env === 'production' ?
'https://www.baidu.com' :
'https://www.baidu.com';
util.ajax = axios.create({
baseURL: ajaxUrl,
timeout: 30000
});
// options
export function axiosfetch(options) {
return new Promise((resolve, reject) => {
var token = window.localStorage.getItem('token') ? window.localStorage.getItem('token') : "";
var cid = window.localStorage.getItem('X-CID') ? window.localStorage.getItem('X-CID') : "";
// var language = window.localStorage.getItem('language') ? window.localStorage.getItem('language') : "";
var language = tools.getCookie('language')?tools.getCookie('language'): navigator.language;
language = language == "en-US" ? "en" : language ;
debug.log(language)
var params = tools.deepClone(options.params);//
var sign_str = tools.sign(params); //
const instance = axios.create({
baseURL: ajaxUrl,
timeout: 30000,
//instance axios , , axios
// , 。
headers: { // header
// 'Content-Type': 'application/json',
"Authorization": token,
"X-CID":cid,
"X-LOCALE":language,
"X-SIGN":sign_str
},
// timeout: 30 * 1000 //30
});
let httpDefaultOpts = { //http
method:options.method,
url: options.url,
timeout: 600000,
params:Object.assign(params),
data:qs.stringify(Object.assign(params)),
// headers: options.method=='get'?{
// 'X-Requested-With': 'XMLHttpRequest',
// "Accept": "application/json",
// "Content-Type": "application/json; charset=UTF-8",
// "Authorization": token
// }:{
// 'X-Requested-With': 'XMLHttpRequest',
// 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
// "Authorization": token
// }
}
if(options.method=='get'){ // get post
delete httpDefaultOpts.data
}else{
delete httpDefaultOpts.params
}
instance(httpDefaultOpts)
.then(response => {//then
debug.log(' :')
debug.log(options.params)
debug.log(' :')
debug.log(response)
debug.log(response.data.errno)
if(response.data.errno == 401){
// alert(response.data.errmsg)
// window.location.href = window.location.protocol + "//" +window.location.host + '/#/login'
return
}
if(response.data.errno == 400){
reject(response)
return
}
resolve(response)//
})
.catch(error => {
// console.log(' =>:' + options.params + '
' + ' ' + error)
debug.log(' =>:' + options.params + '
' + ' ' + error)
reject(error)
})
})
}
外をもう1階包んでください
export function getNodeDetailInfo(address) {
return axiosfetch({
url:api.nodeDetailAPI,//
method:"get",//get
params:{//
address:address
}
})
}
また、以下は実際の応用です。
getNodeDetailInfo(address).then(res => {
var data = res.data.data;
}).catch(error => {
console.log(error, ' ')
})
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。