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:

1. From browsing Create an XMLHttpRequest in the server
   

2. Issue an http request from node.js
   

3. ##Support Promise API

   
   

4. Interception of requests and responses

   
   

5. Convert request and response data

   
   

6. Cancel request

   
   

7. Automatically convert JSON data

   
   

8. Client supports preventing CSRF/XSRF

In the previous chapter, we got to know the directory structure of the project and made some adjustments to the directory structure of the project, and we were able to get the project running again. Today we will build the API interface calling tool Axios. Vue itself does not support ajax calls. If you need these functions, you need to install the corresponding tools.

There are many tools that support ajax requests, such as superagent and axios. Today we are using axios, because I heard that most of the tutorial books on the Internet recently use axios. The axios tool itself has been well optimized and encapsulated, but it is still relatively cumbersome to use, so we will Repackage it.

Install Axios tools

cnpm install axios -D

When installing, be sure to switch to our project root directory, and then run the installation command. If the above message is displayed, the installation is complete.

Encapsulating Axios tools

Edit the src/api/index.js file (when we organized the directory structure in the previous chapter, we created a new empty index.js file in the src/api/ directory ), now we fill in the content of the file.

// 配置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 tool

Before 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 tools

Let’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 most complete axios guide

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!