Analyse sur la création de l'outil de requête d'interface Axios avec VueJs

Dans cet article, nous partageons principalement avec vous l'analyse de l'outil de requête d'interface Axios construit par VueJs. Axios est un client HTTP basé sur Promise pour les navigateurs et nodejs. Aujourd'hui, nous allons présenter VueJs pour créer l'outil de demande d'interface Axios. Les amis qui en ont besoin peuvent se référer à cet article. J'espère que cela pourra aider tout le monde.

introduction à axios

axios est un client HTTP basé sur Promise pour les navigateurs et nodejs :

1. Créer XMLHttpRequest à partir du navigateur

   
   

2. Faire une requête http à partir de node.js

   
   

3. Promesse de support API

   
   

4. Interception des requêtes et des réponses

   
   

5. Convertir les données de requête et de réponse

   
   

6. Annuler la demande

   
   

7. Convertir automatiquement les données JSON

   
   

8. Le client prend en charge la prévention des CSRF/ Aujourd'hui, nous allons créer l'outil d'appel d'interface API Axios. Vue elle-même ne prend pas en charge les appels ajax. Si vous avez besoin de ces fonctions, vous devez installer les outils correspondants.
   Il existe de nombreux outils prenant en charge les requêtes ajax, tels que superagent et axios. Aujourd'hui, nous utilisons axios, car j'ai entendu dire que la plupart des tutoriels sur Internet utilisent récemment axios. L'outil axios lui-même a été bien optimisé et encapsulé, mais il est encore relativement lourd à utiliser, nous allons donc le reconditionner.

Installer les outils Axios

Pendant l'installation, assurez-vous de basculer vers le répertoire racine de notre projet, puis d'exécuter la commande d'installation. Si le message ci-dessus s'affiche, l'installation est terminée.

cnpm install axios -D 

Outil Package Axios

Editer le fichier src/api/index.js (lorsque nous avons organisé la structure des répertoires dans le chapitre précédent, en src/ Un fichier index.js vide est créé dans le répertoire api/), maintenant nous remplissons le contenu du fichier.

// 配置API接口地址
var root = 'https://cnodejs.org/api/v1'
// 引用axios
var axios = require('axios')
// 自定义判断元素类型JS
function toType (obj) {
 return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
 for (var key in o) {
  if (o[key] === null) {
   delete o[key]
  }
  if (toType(o[key]) === 'string') {
   o[key] = o[key].trim()
  } else if (toType(o[key]) === 'object') {
   o[key] = filterNull(o[key])
  } else if (toType(o[key]) === 'array') {
   o[key] = filterNull(o[key])
  }
 }
 return o
}
/*
 接口处理函数
 这个函数每个项目都是不一样的，我现在调整的是适用于
 https://cnodejs.org/api/v1 的接口，如果是其他接口
 需要根据接口的参数进行调整。参考说明文档地址：
 https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
 主要是，不同的接口的成功标识和失败提示是不一致的。
 另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
*/
function apiAxios (method, url, params, success, failure) {
 if (params) {
  params = filterNull(params)
 }
 axios({
  method: method,
  url: url,
  data: method === 'POST' || method === 'PUT' ? params : null,
  params: method === 'GET' || method === 'DELETE' ? params : null,
  baseURL: root,
  withCredentials: false
 })
 .then(function (res) {
 if (res.data.success === true) {
  if (success) {
   success(res.data)
  }
 } else {
  if (failure) {
   failure(res.data)
  } else {
   window.alert('error: ' + JSON.stringify(res.data))
  }
 }
 })
 .catch(function (err) {
  let res = err.response
  if (err) {
   window.alert('api error, HTTP CODE: ' + res.status)
  }
 })
}
// 返回在vue模板中的调用接口
export default {
 get: function (url, params, success, failure) {
  return apiAxios('GET', url, params, success, failure)
 },
 post: function (url, params, success, failure) {
  return apiAxios('POST', url, params, success, failure)
 },
 put: function (url, params, success, failure) {
  return apiAxios('PUT', url, params, success, failure)
 },
 delete: function (url, params, success, failure) {
  return apiAxios('DELETE', url, params, success, failure)
 }
}

Configurer l'outil Axios

Avant de l'utiliser, nous avons besoin pour configurer l'outil Axios dans src Pour une configuration simple dans /main.js, regardez d'abord le fichier main.js d'origine

modifié en :

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
 new Vue({
 el: '#app',
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

Avec la configuration ci-dessus, nous pouvons utiliser l'outil axios dans le projet. Ensuite, testons cet outil.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

Utilisez l'outil Axios

Modifions le fichier src/page/Index.vue et ajustons le code au code suivant :

Nous entrons certaines données demandées par l'interface dans la console du navigateur dans Index.vue Si vous êtes comme moi, cela signifie que notre interface La configuration est. complété correctement. Comme indiqué ci-dessous :

<template>
 <p>index page</p>
</template>
<script>
export default {
 created () {
  this.$api.get(&#39;topics&#39;, null, r => {
   console.log(r)
  })
 }
}
</script>

Si vous suivez mes étapes étape par étape, le résultat final devrait être le même que le mien. Veuillez vérifier attentivement le code si quelque chose ne va pas.

Recommandations associées :

Vuejs utilise vue-markdown pour afficher les méthodes de commentaires

Résumé des connaissances sur la pile technologique Vuejs

Analyse complète de VueJS

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!