Analysis on VueJs to build Axios interface request tool

In this article, we mainly share with you the analysis of VueJs’s Axios interface request tool. Axios is an HTTP client based on Promise for browsers and nodejs. Today we will introduce VueJs to build the Axios interface request tool. Friends who need it can refer to this article. I hope it can help everyone.

axios Introduction

axios is a Promise-based HTTP client for browsers and nodejs. It has the following characteristics:

1. Create XMLHttpRequest from the browser
   

2. Make 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 support prevents CSRF/XSRF

In the previous chapter, we learned about the directory structure of the project, made some adjustments to the directory structure of the project, and 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 information is prompted, the installation is complete.

Encapsulating Axios tools

Edit the src/api/index.js file (when we organized the directory structure in the previous chapter, in src/ An empty index.js file is created in the 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 we use it, we need to configure it in src/main For simple configuration in .js, first take a look at the original main.js file

// 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 }
})

and modify it 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: &#39;<App/>&#39;,
 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(&#39;topics&#39;, null, r => {
   console.log(r)
  })
 }
}
</script>

We enter some data requested by the interface into the browser console in Index.vue. If you are the same as me, it means that our interface configuration is complete. correct. 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:

Vuejs uses vue-markdown to render comment methods

Summary of knowledge about Vuejs technology stack

Comprehensive analysis of VueJS

The above is the detailed content of Analysis on VueJs to build Axios interface request tool. For more information, please follow other related articles on the PHP Chinese website!