Quelles sont les méthodes d'utilisation d'ajax dans Vue ?-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-11 14:10:16

original

1786 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.