Home Web Front-end JS Tutorial Introduction to how to simply configure axios with vue.js

Introduction to how to simply configure axios with vue.js

Jun 29, 2018 am 11:54 AM
axios vue.js vuejs

This article mainly introduces the method of simply configuring axios in vue.js. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

axios is a Promise-based application. For browsers and nodejs HTTP clients, the following article mainly introduces you to the relevant information about the simple configuration of axios with vue.js. Friends who need it can refer to it. Friends who need it can come and learn together.

Preface

Officially no longer recommends using resource. We can’t lag behind if we switch to axios. At least you have to know. Come on, you can brag to the interviewer during the interview and don't talk too much nonsense.

It itself has the following characteristics:

  • Create XMLHttpRequest from the browser

  • Issue an http request from node.js

  • Support Promise API

  • Interception of requests and responses

  • Convert request and response data

  • Cancel request

  • Automatically convert JSON data

  • Client Support preventing CSRF/XSRF

Configuration method

First install with npm

npm install --save axios vue-axios
Copy after login

After installation, configure it in your main.js file and add these two sentences

import axios from 'axios'
Vue.prototype.$http = axios
Copy after login

Then when you read the interface data, you can write it directly like this. This is the same as resource. The op, uin and so on below are the parameters to be passed.

this.$http.post(localStorage.getItem("addUrl")+'/skynet_sync/btsp', {
       "op": "update_card_num",
       "uin": uin,
       "protypeId": index,   
       "cardNumber": parseInt(v)
      })
      .then(response=> {
      //如果接口走成功就执行这里
      }).catch(function (error) {
      //接口失败,也就是state不是200的时候,走这里
      });
Copy after login

Okay, done!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use Vue.js instructions to implement the select-all function

About the usage analysis of vue routing

The above is the detailed content of Introduction to how to simply configure axios with vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1657
14
PHP Tutorial
1257
29
C# Tutorial
1229
24
How to use Vue to implement QQ-like chat bubble effects How to use Vue to implement QQ-like chat bubble effects Sep 20, 2023 pm 02:27 PM

How to use Vue to implement QQ-like chat bubble effects In today’s social era, the chat function has become one of the core functions of mobile applications and web applications. One of the most common elements in the chat interface is the chat bubble, which can clearly distinguish the sender's and receiver's messages, effectively improving the readability of the message. This article will introduce how to use Vue to implement QQ-like chat bubble effects and provide specific code examples. First, we need to create a Vue component to represent the chat bubble. The component consists of two main parts

Integration of Vue.js and Lua language, best practices and experience sharing in building front-end engines for game development Integration of Vue.js and Lua language, best practices and experience sharing in building front-end engines for game development Aug 01, 2023 pm 08:14 PM

The integration of Vue.js and Lua language, best practices and experience sharing for building a front-end engine for game development Introduction: With the continuous development of game development, the choice of game front-end engine has become an important decision. Among these choices, the Vue.js framework and Lua language have become the focus of many developers. As a popular front-end framework, Vue.js has a rich ecosystem and convenient development methods, while the Lua language is widely used in game development because of its lightweight and efficient performance. This article will explore how to

How to use PHP and Vue.js to implement data filtering and sorting functions on charts How to use PHP and Vue.js to implement data filtering and sorting functions on charts Aug 27, 2023 am 11:51 AM

How to use PHP and Vue.js to implement data filtering and sorting functions on charts. In web development, charts are a very common way of displaying data. Using PHP and Vue.js, you can easily implement data filtering and sorting functions on charts, allowing users to customize the viewing of data on charts, improving data visualization and user experience. First, we need to prepare a set of data for the chart to use. Suppose we have a data table that contains three columns: name, age, and grades. The data is as follows: Name, Age, Grades Zhang San 1890 Li

Integration of Vue.js and Dart language, practical and development skills for building cool mobile application UI interfaces Integration of Vue.js and Dart language, practical and development skills for building cool mobile application UI interfaces Aug 02, 2023 pm 03:33 PM

Integration of Vue.js and Dart language, practice and development skills for building cool mobile application UI interfaces Introduction: In mobile application development, the design and implementation of the user interface (UI) is a very important part. In order to achieve a cool mobile application interface, we can integrate Vue.js with the Dart language, and use the powerful data binding and componentization features of Vue.js and the rich mobile application development library of the Dart language to build Stunning mobile application UI interface. This article will show you how to

How to implement interactive heat map statistics in PHP and Vue.js How to implement interactive heat map statistics in PHP and Vue.js Aug 19, 2023 am 09:41 AM

How to implement interactive heat map statistics in PHP and Vue.js Heat map (Heatmap) is a visual way to display the distribution and concentration of data in the form of a heat map. In web development, it is often necessary to combine back-end data and front-end display to implement interactive heat map statistical functions. This article will introduce how to implement this functionality in PHP and Vue.js, and provide corresponding code examples. Step 1: Preparation of back-end data First, we need to prepare the data for generating heat maps. In PHP, I

Vue.js vs. React: Project-Specific Considerations Vue.js vs. React: Project-Specific Considerations Apr 09, 2025 am 12:01 AM

Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.

Integration of Vue.js and Shell script to realize automated workflow Integration of Vue.js and Shell script to realize automated workflow Aug 02, 2023 pm 12:28 PM

Integration of Vue.js and Shell script to realize automated workflow overview: In the software development process, automated workflow can greatly improve development efficiency and quality. Vue.js is a popular front-end framework, while Shell script is a tool for performing command line tasks. This article will introduce how to integrate Vue.js with Shell scripts to realize automated workflow and provide developers with a more convenient development experience. Background: Vue.js is a front-end software developed using JavaScript.

Is vue.js hard to learn? Is vue.js hard to learn? Apr 04, 2025 am 12:02 AM

Vue.js is not difficult to learn, especially for developers with a JavaScript foundation. 1) Its progressive design and responsive system simplify the development process. 2) Component-based development makes code management more efficient. 3) The usage examples show basic and advanced usage. 4) Common errors can be debugged through VueDevtools. 5) Performance optimization and best practices, such as using v-if/v-show and key attributes, can improve application efficiency.

See all articles