Verwendung asynchroner Axios-Anforderungsdaten (Codebeispiel)

In diesem Artikel geht es um die Verwendung asynchroner Anforderungsdaten in Axios (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

Nachdem Sie Mock zum Simulieren der Backend-Daten verwendet haben, müssen Sie versuchen, das Laden der Daten anzufordern. Für die Datenanforderung wurde Axios ausgewählt und es wird nun empfohlen, Axios zu verwenden.

axios (https://github.com/axios/axios) basiert auf HTTP-Bibliothek für Versprechen. Wie in der offiziellen Website-Dokumentation vorgestellt, npm i Danach laden Sie einfach die erforderlichen Komponenten hinein. Persönlich denke ich, dass der Reiz des Codierens darin besteht, dass es mehr als eine Möglichkeit gibt, ein Problem zu lösen. Manchmal ist diese Methode in Ihrer Entwicklungsumgebung in Ordnung, in meiner Entwicklungsumgebung jedoch nicht. Daher gibt es verschiedene Probleme und die Lösungsmethoden sind auch vielfältig.

Erste Schritte mit axios

1. Installieren Sie

npm i axios -S

2. Importieren Sie

im src Verzeichnis Erstellen Sie eine neue apis.js-Datei (es wird eine API-Schnittstelle geben, wenn das Projekt schrittweise verbessert wird. Natürlich kann sie auch axios.js heißen. Der Name ist für andere verständlich) und führen Sie Folgendes ein:

import axios from 'axios';

Bearbeiten Sie danach die apis.js-Datei und erwägen Sie die Kapselung von axios.get oder Post-Anfragen

3. Bearbeiten der apis.js-Datei

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. In den erforderlichen Komponentenreferenzen in

rrree

Viele Komponenten müssen Daten jedes Mal anfordern Sie müssen es in die Komponente importieren.

 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;
      });
    }
  }
}

6. Axios kombiniert mit vuex (es wurde noch nicht im Projekt verwendet, wenn es irgendwelche Probleme gibt, korrigieren Sie mich bitte)

Referenz in der vuex-Warehouse-Datei store.js und Verwenden Sie die Methode zum Hinzufügen von Aktionen. Aktionen können asynchrone Vorgänge enthalten und Mutationen können über Aktionen übermittelt werden. Die Aktion hat einen inhärenten Parameterkontext, aber der Kontext ist das übergeordnete Element des Status, einschließlich Status und Getter

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

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

在组件中使用：

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

Wenn Sie eine Anfrage in einer Komponente senden, müssen Sie this.$store.dispatch verwenden, um

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
      })
    }
  }
})

zu verteilen

Mehrere Methoden des asynchronen Ladens

1. $.ajax( url[, Einstellungen])

URL: erfordert Parameter vom Typ String (Standard ist der aktuelle Seitenadresse), an die die Anfrage gesendet wird.

Typ: erfordert einen Parameter vom Typ String und die Anforderungsmethode (post oder get) ist standardmäßig get.

Daten: Gibt die Daten an, die an den Server gesendet werden sollen.
async: Boolescher Wert, der angibt, ob die Anfrage asynchron verarbeitet wird. Der Standardwert ist wahr.
dataType: erfordert einen Parameter vom Typ String, dem Datentyp, der voraussichtlich vom Server zurückgegeben wird.
contentType: erfordert einen Parameter vom Typ String. Beim Senden von Informationen an den Server ist der Inhaltskodierungstyp standardmäßig „application/x-www-form-urlencoded“.
Erfolgreich: Die Anforderung ist ein Parameter vom Typ Funktion, eine Rückruffunktion, die aufgerufen wird, nachdem die Anforderung erfolgreich war.
Fehler: Parameter vom Funktionstyp, Rückruffunktion wird aufgerufen, nachdem die Anfrage fehlgeschlagen ist.
jsonp: Schreiben Sie die Zeichenfolge der Rückruffunktion in ein JSONP um.

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

2. Problem bei domänenübergreifenden Anfragen mit $.ajax

Wenn die von Ajax angeforderte URL nicht lokal oder die Adresse desselben Servers ist, meldet der Browser einen Fehler: Nein ' Der Header „Access-Control -Allow-Origin“ ist auf der angeforderten Ressource Origin vorhanden... Aufgrund des Sicherheitsmechanismus des Browsers können URL-Adressen unter verschiedenen Servern nicht aufgerufen werden. Auf dieser Grundlage bietet jQuery.ajax eine JSONP-Lösung: Setzen Sie den vom Server zurückgegebenen Datentyp auf 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: ""
     });
   });
 });

Jsonp ist jedoch eine inoffizielle Methode und diese Methode unterstützt nur Get-Anfragen, was nicht so sicher ist wie Post-Anfragen. Darüber hinaus erfordert JSONP die Mitarbeit des Servers. Wenn wir auf einen Server eines Drittanbieters zugreifen und keine Berechtigung zum Ändern des Servers haben, ist diese Methode nicht möglich.

3. vue-resource im Vue-Framework

ue-resource ist ein Plug-in für Vue.js. Es kann Anfragen über XMLHttpRequest oder JSONP initiieren. vue-resource ist klein und unterstützt gängige Browser. Vue wird jedoch nach 2.0 nicht mehr aktualisiert. You Dashen empfiehlt die Verwendung von axios.

 $(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"
     });
   });
 });

4. Probleme mit domänenübergreifenden Anfragen mit vue-resource

Aufgrund des Sicherheitsmechanismus des Browsers treten auch bei vue-resource Probleme mit domänenübergreifenden Anfragen auf. Die Lösung lautet wie folgt: Konfigurieren Sie die Proxy-Tabelle in der Datei config/index.js unter dem Vue-Projekt:

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

4 Das Problem der domänenübergreifenden Anfragen von Axios

ist das gleiche wie vue-resource, im vue-Projekt Die Proxy-Proxy-Tabelle ist in der Datei config/index.js unter:

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

konfiguriert. Bei den beiden Methoden vue-resource und axios wird die Proxy-Tabelle jedoch möglicherweise weiterhin gemeldet : Nein „Access-Control-Allow-Origin“ Das Problem mit dem Header ist vorhanden auf... erfordert, dass der Backend-Server mit den Einstellungen kooperiert:

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

Das obige ist der detaillierte Inhalt vonVerwendung asynchroner Axios-Anforderungsdaten (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!