Tipp: Nachdem der Artikel geschrieben wurde, kann das Inhaltsverzeichnis automatisch generiert werden. Informationen zur Generierung finden Sie im Hilfedokument rechts.
Artikelverzeichnis
1. Was ist Versprechen?
ECMAscript 6 stellt nativ Promise-Objekte bereit.
Promise-Objekte stellen Ereignisse dar, die in der Zukunft auftreten werden, und werden zur Übermittlung von Nachrichten für asynchrone Vorgänge verwendet.
Einfach ausgedrückt handelt es sich um asynchrone Verarbeitung, asynchrones Laden von Daten usw.
2. Was ist asynchron und synchron?
Vereinfacht ausgedrückt
bedeutet die Synchronisierung, dass ich stark von Ihnen (der anderen Partei) abhängig bin und auf Ihre Antwort warten muss, bevor ich die nächste Antwort geben kann. Synchronisation scheint gleichbedeutend mit Blockieren zu sein, und asynchron ist gleichbedeutend mit Nichtblockieren, was dem Gefühl von einspuriger und mehrspuriger Spur ähnelt. Synchronisation ist eine einspurige Spur. Wenn vor mir ein Stau ist, kann ich nur warten Ich muss das Auto verlassen, bevor ich meinem „Programm“ folgen kann, während asynchron Dieses Problem kann sehr gut gelöst werden. Denn wenn es viele Straßen gibt, wird es natürlich glatt sein.
2. Laden Sie den Code hoch
1.axios-Version (vue)
Es scheint, dass Axios auf Promise basiert, aber ich kenne die Details nicht. In der Vergangenheit hat Vue dieses Plug-In häufig verwendet. Vergiss es und erstelle eine Version.
Hier ist ein js direkt gekapselt und die Methode wurde exportiert:
import axios from "axios"
const myRequest = (options) =>{
return new Promise((resolve,reject) => {
axios({
url: options.url,
method:options.method || 'POST',
data:options.data || {
},
}).then((res) => {
resolve(res) //将结果导出
})
})
}
export {
myRequest}
Hier sind die Vorgänge in main.js (Importieren und Mounten des globalen)
import {
myRequest} from "@/assets/js/api.js"
Vue.prototype.$myRequest = myRequest
verwenden! ! !
async getdata (state, a) {
await this.$myRequest(
{
url: "/data/world-top10", //请求路径
method: "GET" //请求方式
}
).then((res) => {
//这里的res直接就是上面resolve（）返回出来的结果啦！也就是你请求成功的结果
console.log(res)
}
})
}
2.Uni-App
Montage und Verwendung sind die gleichen wie oben. Es gibt nicht viel Code, den bb direkt kapselt:
const myRequest = (options) =>{
return new Promise((resolve,reject) => {
uni.request({
url:options.url,
method:options.method || 'POST',
data:options.data || {
},
header:encryptDes(), //这是请求头的设置
success: res => {
resolve(res) //返回请求成功结果
},
fail: (err) => {
reject(err) //返回请求失败信息
}
})
})
}
export {
myRequest}
3. Ajax-Version
function ajax(URL) {
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', URL, true);
req.onload = function () {
if (req.status === 200) {
resolve(req.responseText);//成功信息
} else {
reject(new Error(req.statusText));
}
};
req.onerror = function () {
reject(new Error(req.statusText));
};
req.send();
});
}
var URL = "/try/ajax/testpromise.php"; //请求的链接
ajax(URL).then(function onFulfilled(value){
document.write('内容是：' + value);
}).catch(function onRejected(error){
document.write('错误：' + error);
});
Zusammenfassen
Möglicherweise stimmt etwas mit dem, was ich gesagt habe, nicht. Bitte hinterlassen Sie eine Nachricht! ! emmmmmmm, es ist kein Problem, wenn Sie es verwenden, verwenden Sie es einfach als Notiz! ! ! !