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 :
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
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) } }
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: '<App/>', 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: '<App/>', components: { App } })
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('topics', 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
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!