Home > Article > Web Front-end > Detailed explanation of VueJs building Axios interface request tool example
In this article, we mainly introduce to you VueJs to build the Axios interface request tool. axios is an HTTP client based on Promise for browsers and nodejs. Friends who need it can refer to it. I hope it can help you.
axios Introduction
axios is a Promise-based HTTP client for browsers and nodejs. It has the following characteristics:
From browsing Create an XMLHttpRequest in the server
Issue an http request from node.js
// 配置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) } }Configuring the Axios toolBefore using it, we need to perform simple configuration in src/main.js. Let’s take a look at the original main.js file first
// 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 } })Modify to:
// 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 } })With the above configuration, we can use the axios tool in the project. Next, let’s test this tool. Using Axios toolsLet’s modify the src/page/Index.vue file and adjust the code to the following code:
<template> <p>index page</p> </template> <script> export default { created () { this.$api.get('topics', null, r => { console.log(r) }) } } </script>We browse in Index.vue Enter some data requested by the interface into the console of the server. If you and I are the same, it means that our interface configuration is completed correctly. As shown below: #If you follow my steps step by step, the final result should be the same as mine. Please check the code carefully if something goes wrong. Related recommendations:
Detailed explanation of vue using axios to request data across domains
About vue2.0 setting proxyTable to use axios for cross-domain Request
The above is the detailed content of Detailed explanation of VueJs building Axios interface request tool example. For more information, please follow other related articles on the PHP Chinese website!