So implementieren Sie eine Ajax-Anfrage mit Axios (ausführliches Tutorial)

Ich habe Ihnen zuvor die Verwendung der elegantesten Methode zum Schreiben von Ajax-Anfragen vorgestellt. In diesem Artikel werden Ihnen hauptsächlich relevante Informationen zur fortgeschrittenen Praxis von Axios und zur Verwendung der elegantesten Methode zum Schreiben von Ajax-Anfragen vorgestellt Die Code-Einführung ist sehr detailliert und hat einen gewissen Referenzwert für das Studium oder die Arbeit. Freunde, die sie benötigen, können einen Blick darauf werfen.

Vorwort

Ich glaube nicht, dass Ajax allzu oft eingeführt werden muss. Der Autor ist fest davon überzeugt, dass es Probleme gibt, die durch Konfiguration gelöst werden können Die folgenden Wörter werden nicht genug gesagt, werfen wir einen Blick auf die detaillierte Einführung.

Begleitartikel zu jQuery Advanced: Schreiben Sie Ajax-Anfragen auf die eleganteste Art und Weise

axios ist die von Vue offiziell empfohlene Ajax-Bibliothek, die als Ersatz für vue-resource verwendet wird. Detailliertere Grundkenntnisse finden Sie in diesem Artikel: //www.jb51.net/article/109444.htm

Vorteile:

• Um eine Ajax-Schnittstelle hinzuzufügen, müssen Sie nur noch ein paar Zeilen in die Konfigurationsdatei schreiben

• Sie müssen keine Axios-Aufrufe in die Komponente schreiben, rufen Sie einfach die API-Methode auf direkt, was sehr praktisch ist

• Wenn die Schnittstelle angepasst wird, müssen Sie nur die Schnittstellenkonfigurationsdatei ändern

• Einheitliche Verwaltung der Schnittstellenkonfiguration

1. Inhaltstypkonfiguration

// filename: content-type.js
module.exports = {
 formData: 'application/x-www-form-urlencoded; charset=UTF-8',
 json: 'application/json; charset=UTF-8'
}

2. API-Konfiguration

// filename: api-sdk-conf.js
import contentType from './content-type'
export default {
 baseURL: 'http://192.168.40.231:30412',
 apis: [
 {
  name: 'login',
  path: '/api/security/login?{{id}}',
  method: 'post',
  contentType: contentType.formData,
  status: {
  401: '用户名或者密码错误'
  }
 }
 ]
}

3. request.js-Methode

// request.js
import axios from 'axios'
import qs from 'qs'
import contentType from '@/config/content-type'
import apiConf from '@/config/api-sdk-conf'
var api = {}
// render 函数用来渲染路径上的变量, 算是一个微型的模板渲染工具
// 例如render('/{{userId}}/{{type}}/{{query}}', {userId:1,type:2, query:3})
// 会被渲染成 /1/2/3
function render (tpl, data) {
 var re = /{{([^}]+)?}}/
 var match = ''
 while ((match = re.exec(tpl))) {
 tpl = tpl.replace(match[0], data[match[1]])
 }
 return tpl
}
// fire中的this, 会动态绑定到每个接口上
function fire (query = {}, payload = '') {
 // qs 特别处理 formData类型的数据
 if (this.contentType === contentType.formData) {
 payload = qs.stringify(payload)
 } 
 // 直接返回axios实例，方便调用then,或者catch方法
 return axios({
 method: this.method,
 url: render(this.url, query),
 data: payload,
 headers: {
  contentType: this.contentType
 }
 })
}
apiConf.apis.forEach((item) => {
 api[item.name] = {
 url: apiConf.baseURL + item.path,
 method: item.method,
 status: item.status,
 contentType: item.contentType,
 fire: fire
 }
})
export default api

4. Verwenden Sie

import api from '@/apis/request'
...
  api.login.fire({id: '?heiheihei'}, {
  username: 'admin',
  password: 'admin',
  namespace: '_system'
  })
...

<🎜 in der Komponente >Browser-Ergebnisse:

Request URL:http://192.168.40.231:30412/api/security/login??heiheihei
Request Method:POST
Status Code:200 OK
Remote Address:192.168.40.231:30412
Referrer Policy:no-referrer-when-downgrade
POST /api/security/login??heiheihei HTTP/1.1
Host: 192.168.40.231:30412
Connection: keep-alive
Content-Length: 47
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
contentType: application/x-www-form-urlencoded; charset=UTF-8
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
username=admin&password=admin&namespace=_system

Mehr

Da ist was Ich verstehe es nicht ganz, ich hoffe, jemand, der es versteht, kann mir eine Antwort geben

Wenn eine Komponente nur die Anmeldemethode benötigt, ich sie aber so schreibe, wird ein Fehler gemeldet.

import {login} from '@/apis/request'

Die Voraussetzung für dieses Schreiben ist,

export var login = api.login

am Ende von request.js zu schreiben. Das ist jedoch nicht das, was ich möchte, denn jedes Mal, wenn eine Schnittstelle hinzugefügt wird, muss es so sein Dies entspricht nicht dem Open-Closed-Prinzip. Gibt es einen besseren Weg?

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Gulp-Verpackung mit NodeJS

Detaillierte Interpretation der neuen Funktionen von Angular5.1

So verwenden Sie Vuex zur Implementierung der Menüverwaltung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Ajax-Anfrage mit Axios (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!