Utilisation des données de requête asynchrone axios (exemple de code)

Ce que cet article vous apporte concerne l'utilisation de données de requêtes asynchrones dans axios (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Après avoir utilisé Mock pour simuler les données backend, vous devez essayer de demander le chargement des données. Axios a été sélectionné pour la demande de données, et il est désormais recommandé d'utiliser axios.

axios (https://github.com/axios/axios) est basé sur Bibliothèque HTTP pour les promesses. Comme introduit dans la documentation du site officiel, npm i Après cela, chargez-le simplement dans les composants requis. Personnellement, je pense que le charme du codage réside dans le fait qu'il existe plusieurs façons de résoudre un problème. Parfois, cette méthode convient à votre environnement de développement, mais pas à mon environnement de développement. Il existe donc divers problèmes et les méthodes de remise en question des solutions. sont également diversifiés.

Démarrage avec axios

1 Installation

npm i axios -S

2 Introduction

. src Créez un nouveau fichier apis.js dans le répertoire (il y aura une interface API au fur et à mesure que le projet sera amélioré. Bien sûr, il peut également être nommé axios.js. Le nom est à comprendre par les autres), et introduisez :

import axios from 'axios';

Après cela, modifiez le fichier apis.js et pensez à encapsuler axios.get ou postez une demande

3. Modification du fichier apis.js

import axios from 'axios';
const Domain = "http://localhost:8080";  // 定义根域名
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 设置post默认的请求头

// 封装 post 请求
export function post(action, params){
  return new Promise((resolve, reject) => {
    // url 判断是测试环境 就要拿 测试环境的域名， 正式环境的就要用 正式域名
    let url = Domain + action;
    axios.post(url, params)
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  });
}

 // 封装 get 请求

export function get(action, params){
  return new Promise((resolve, reject) => {
    axios.get(Domain + action, params)
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  });
}

export default {
  postData(action, params){
    return post(action, params)
  },
  getData(action, params){
    return get(action, params)
  }
}

4. Référence dans les composants requis

 import api from '../../apis.js';
 export default {
  name: "banner",
  data() {
    return {
      bannerList: []
    };
  },
  created(){
    this.getBanner(); // 在页面渲染完成即加载
  },
  methods: {
    getBanner(){
      this.$api.getData('/getBanner').then(val => {
        this.bannerList = val.imgs;
      });
    }
  }
}

5. Configuration globale axios

De nombreux composants doivent demander des données Il est difficile de les importer à chaque fois. . Après la configuration globale, il n'est pas nécessaire d'importer dans le composant.

在入口文件main.js中引入，之后挂在vue的原型链上：

import api from './apis.js';
Vue.prototype.$http = api;

在组件中使用：

getBanner(){
    this.$http.getData('/getBanner').then(val => {
      this.bannerList = val.imgs;
    });
  }

6. Axios combiné avec vuex (pas encore utilisé dans le projet, veuillez me corriger s'il y a des problèmes)

Référence dans le fichier d'entrepôt vuex store.js et ajoutez-le en utilisant la méthode d'action. Les actions peuvent contenir des opérations asynchrones et les mutations peuvent être soumises via des actions. L'action a un contexte de paramètre inhérent, mais le contexte est le parent de l'état, y compris l'état et les getters

import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
export default new Vuex.Store({
 // 定义状态
  state: {
    banners: {
      name: 'pic'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    saveBanner (context) {
      axios({
        method: 'get',
        url: '/getBanner',
        data: context.state.banners
      })
    }
  }
})

Lors de l'envoi d'une requête dans un composant, vous devez utiliser this.$store.dispatch pour distribuer

methods: {
  getBananer() {
  this.$store.dispatch('saveBanner')  // actions里的方法名
  }
}

Plusieurs méthodes de chargement asynchrone

1 $.ajax( url[, settings])

url : nécessite des paramètres de type String, (Par défaut, l'adresse de la page actuelle) L'adresse à laquelle envoyer la demande.
type : le paramètre doit être de type String. La méthode de requête (post ou get) est par défaut get.
data : Spécifie les données à envoyer au serveur.
async : Valeur booléenne, indiquant si la requête est traitée de manière asynchrone. La valeur par défaut est vraie.
dataType : nécessite un paramètre de type String, le type de données qui devrait être renvoyé par le serveur.
contentType : nécessite un paramètre de type String Lors de l'envoi d'informations au serveur, le type d'encodage du contenu est par défaut "application/x-www-form-urlencoded".
Succès : L'exigence est un paramètre de type Function, une fonction de rappel appelée une fois la requête réussie.
erreur : paramètre de type de fonction, fonction de rappel appelée après l'échec de la requête.
jsonp : Réécrivez la chaîne de la fonction de rappel dans un jsonp.

$(function(){
  $('#send').click(function(){
    $.ajax({
      type: "GET",
      url: "test.json",
      data: {username:$("#username").val(), content:$("#content").val()},
      dataType: "json",
      success: function(data){
        // handle success
      }
      error: function(data){
       // handle error
      }
      jsonp: ""
     });
   });
 });

2. Problème de requête inter-domaines avec $.ajax

Lorsque l'URL demandée par Ajax n'est pas locale ou l'adresse du même serveur, le navigateur signalera une erreur : Aucun en-tête 'Access -Control-Allow-Origin' n'est présent sur la ressource demandée. Origine... En raison du mécanisme de sécurité du navigateur, les adresses URL sous différents serveurs ne peuvent pas être appelées. Sur cette base, jQuery.ajax propose une solution jsonp : définissez le type de données renvoyé par le serveur sur jsonp.

 $(function(){
  $('#send').click(function(){
    $.ajax({
      type: "GET",
      url: "test.json",
      data: {username:$("#username").val(), content:$("#content").val()},
      dataType: "jsonp",   // jsonp格式
      success: function(data){
        // handle success
      }
      error: function(data){
       // handle error
      }
      jsonp: "callback"
     });
   });
 });

Cependant, jsonp est une méthode non officielle, et cette méthode ne prend en charge que les requêtes get, ce qui n'est pas aussi sûr que les requêtes de publication. De plus, jsonp nécessite la coopération du serveur. Si nous accédons à un serveur tiers et que nous n'avons pas l'autorisation de modifier le serveur, cette méthode n'est pas réalisable.

3. vue-resource dans le framework vue

ue-resource est un plug-in pour Vue.js Il peut lancer des requêtes et traiter des réponses via XMLHttpRequest ou JSONP. vue-resource est de petite taille et prend en charge les navigateurs grand public. Cependant, vue ne sera plus mise à jour après la version 2.0. You Dashen recommande d'utiliser axios.

{
   // GET /someUrl
  this.$http.get('/someUrl').then(response => {
   // get body data
  this.someData = response.body;
 }, response => {
   // error callback
 });
}

4. Problèmes de requêtes inter-domaines avec vue-resource

De même, en raison du mécanisme de sécurité du navigateur, vue-resource est également confrontée à des problèmes de requêtes inter-domaines. La solution est la suivante : Configurez la table proxy dans le fichier config/index.js sous le projet vue :

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {    // 新增，解决跨域请求问题
      '/api': {
        target: 'http://192.168.1.103:8080/',
        changeOrigin: true,
        pathRewrite: {
          '`/api': '/'
        }
      },
      secure: false
    },
    
 target中写你想要请求数据的地址的域名

4 Le problème des requêtes inter-domaines axios

est le. identique à vue-resource. Le proxy proxyTable est configuré dans le fichier config/index.js sous le projet vue :

 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {    // 新增，解决跨域请求问题
      '/api': {
        target: 'http://192.168.1.103:8080/',
        changeOrigin: true,
        pathRewrite: {
          '`/api': '/'
        }
      },
      secure: false
    },

Cependant, avec les deux méthodes vue-resource et axios, la table proxy peut toujours être signalé : aucun en-tête 'Access-Control- Allow-Origin' n'est présent sur... Ce problème nécessite que le serveur backend coopère avec le paramètre :

 header("Access-Control-Allow-Origin", "*");
 header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

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!