Maison > interface Web > js tutoriel > Quelles sont les méthodes d'utilisation d'ajax dans Vue ?

Quelles sont les méthodes d'utilisation d'ajax dans Vue ?

亚连
Libérer: 2018-06-11 14:10:16
original
1876 Les gens l'ont consulté

Ci-dessous, je partagerai avec vous un article sur la méthode publique ajax basée sur Vue (explication détaillée), qui a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Afin de réduire la redondance du code, nous avons décidé d'extraire la méthode publique de demande d'ajax pour que les collègues puissent l'utiliser.

J'ai utilisé la syntaxe ES6 pour écrire cette méthode.

/**
  * @param type 请求类型,分为POST/GET
  * @param url 请求url
  * @param contentType
  * @param headers
  * @param data
  * @returns {Promise<any>}
  */
 ajaxData: function (type, url, contentType, headers, data) {
  return new Promise(function(resolve) {
   $.ajax({
    type: type,
    url: url,
    data: data,
    timeout: 30000, //超时时间:10秒
    headers: headers,
    success: function(data) {
     resolve(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
     resolve(XMLHttpRequest);
    }
   });
  });
 }
Copier après la connexion

Renvoyer le résultat de la requête via la fonction de rappel.

Le code du test est le suivant :

getAjaxDataMethod: function () {
    const url = "";
    const type = "POST";
    const contentType = "application/json";
    const headers = {};
    const data = {};
    Api.ajaxData(type, url, contentType, headers, data).then(function (res) {
     console.log(res);
    }).catch(function (err) {
     console.log(err);
    })
   }
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Comment classList implémente la commutation de style à deux boutons

Défilement virtuel sur 2.x dans l'article vue.js

Comment utiliser AngularJS pour implémenter la fonction de téléchargement de fichiers Excel

Comment configurer la configuration dans vue (tutoriel détaillé)

Comment implémenter le mouvement multi-objets en JS (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal