Comment implémenter une requête ajax à l'aide d'axios (tutoriel détaillé)-js tutoriel-php.cn

Comment implémenter une requête ajax à l'aide d'axios (tutoriel détaillé)

亚连

Libérer： 2018-06-19 16:09:07

original

1966 Les gens l'ont consulté

Je vous ai déjà présenté l'utilisation par jQuery de la manière la plus élégante d'écrire des requêtes ajax. Cet article vous présente principalement les informations pertinentes sur la pratique avancée d'axios et l'utilisation de la manière la plus élégante d'écrire des requêtes ajax. utilise des exemples. L'introduction du code est très détaillée et a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. Les amis qui en ont besoin peuvent y jeter un œil ci-dessous.

Avant-propos

Je pense qu'Ajax n'a pas besoin d'être trop présenté. L'auteur croit fermement que les problèmes qui peuvent être résolus avec la configuration le sont. pas codé en dur. Les mots suivants ne seront pas assez dits, jetons un coup d'œil à l'introduction détaillée.

Article complémentaire jQuery Advanced : Écrivez des requêtes ajax de la manière la plus élégante

axios est la bibliothèque ajax officiellement recommandée par Vue, utilisée pour remplacer vue-resource. Pour des connaissances de base plus détaillées, veuillez vous référer à cet article : //www.jb51.net/article/109444.htm

Avantages :

Pour ajouter une interface ajax, il vous suffit d'écrire quelques lignes supplémentaires dans le fichier de configuration
Vous n'avez pas besoin d'écrire des appels axios dans le composant, appelez simplement la méthode api directement, ce qui est très pratique
Si l'interface est ajustée, il suffit de modifier le fichier de configuration de l'interface
Gestion unifiée de la configuration de l'interface

1. Configuration du type de contenu

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

Copier après la connexion

2. 🎜>

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

Copier après la connexion

3. Méthode request.js

// request.js
import axios from &#39;axios&#39;
import qs from &#39;qs&#39;
import contentType from &#39;@/config/content-type&#39;
import apiConf from &#39;@/config/api-sdk-conf&#39;
var api = {}
// render 函数用来渲染路径上的变量, 算是一个微型的模板渲染工具
// 例如render(&#39;/{{userId}}/{{type}}/{{query}}&#39;, {userId:1,type:2, query:3})
// 会被渲染成 /1/2/3
function render (tpl, data) {
 var re = /{{([^}]+)?}}/
 var match = &#39;&#39;
 while ((match = re.exec(tpl))) {
 tpl = tpl.replace(match[0], data[match[1]])
 }
 return tpl
}
// fire中的this, 会动态绑定到每个接口上
function fire (query = {}, payload = &#39;&#39;) {
 // 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

Copier après la connexion

4. dans le composant

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

Copier après la connexion

Résultats du navigateur :

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

Copier après la connexion

Plus

Il y a un endroit que je ne comprends pas très bien, j'espère que quelqu'un qui comprend pourra me donner une réponse

Si un composant n'a besoin que de la méthode de connexion, mais j'obtiendrai un erreur quand je l'écris comme ça.

import {login} from &#39;@/apis/request&#39;

Copier après la connexion

Le principe d'écrire comme ceci est d'écrire

export var login = api.login

Copier après la connexion

à la fin de request.js Mais c'est ce que je ne veux pas, car à chaque fois une interface. est ajouté, il doit être exporté ici. Une fois, cela n'est pas conforme au principe ouvert-fermé.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter le packaging gulp à l'aide de nodejs

Interprétation détaillée des nouvelles fonctionnalités d'Angular5.1

Comment utiliser vuex pour implémenter la gestion des menus

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!