How to implement global registration in axios
This article mainly introduces you to the relevant information about how to register axios globally. The article introduces it in detail through sample code. It has certain reference learning value for everyone to learn or use axios. Friends who need it can learn together. Bar.
Preface
When I wrote a project using Vue recently, I used axios, because axios cannot use Vue.use() (details can be introduced (Refer to this article), so you need to import when using axios in each .vue file. If there are few .vue files, it will be fine, but if there are many, it will be a bit troublesome.
Later I thought about whether I could add axios directly to the Vue prototype, so that global registration would be achieved. Not much to say below, let’s take a look at the detailed introduction.
The method is as follows:
1. First introduce axios
import Vue from 'vue'
import axios from 'axios'
//把 `axios` 加到 `Vue` 的原型中
Vue.prototype.axios = axios;
new Vue({
el: '#app',
render:h => h(App)
})in main.js 2. When using it in a .vue file, pay attention to adding this
<script>
export default {
name:'app',
data(){
return{
msg:'hello'
}
},
methods:{
send(){
// 注意：因为 axios 是加到 Vue 的原型中了，所以使用 axios 方法时，前面需要加 this
this.axios.get('https://www.baidu.com*******')
.then(resp => {
console.log(resp.data)
}).catch(err => {
console.log(err);
})
}
}
}
</script>before axios. The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to build helloWorld using vue-cli in vue
Issues related to value passing in layui
How to implement a lottery system using JavaScript
Detailed answer: What impact do changes in vue have on components?
Detailed explanation of how to configure Vue packaging tool
The above is the detailed content of How to implement global registration in axios. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if 'Uncaught (in promise) Error: Request failed with status code 500' occurs when using axios in a Vue application?
Jun 24, 2023 pm 05:33 PM
It is very common to use axios in Vue applications. axios is a Promise-based HTTP client that can be used in browsers and Node.js. During the development process, the error message "Uncaught(inpromise)Error: Requestfailedwithstatuscode500" sometimes appears. For developers, this error message may be difficult to understand and solve. This article will explore this
Choice of data request in Vue: Axios or Fetch?
Jul 17, 2023 pm 06:30 PM
Choice of data request in Vue: AxiosorFetch? In Vue development, handling data requests is a very common task. Choosing which tool to use for data requests is a question that needs to be considered. In Vue, the two most common tools are Axios and Fetch. This article will compare the pros and cons of both tools and give some sample code to help you make your choice. Axios is a Promise-based HTTP client that works in browsers and Node.
What should I do if 'TypeError: Failed to fetch' occurs when using axios in a Vue application?
Jun 24, 2023 pm 11:03 PM
Recently, during the development of Vue applications, I encountered a common problem: "TypeError: Failedtofetch" error message. This problem occurs when using axios to make HTTP requests and the backend server does not respond to the request correctly. This error message usually indicates that the request cannot reach the server, possibly due to network reasons or the server not responding. What should we do after this error message appears? Here are some workarounds: Check your network connection due to
How to solve the problem of 'Error: Network Error' when using axios in Vue application?
Jun 25, 2023 am 08:27 AM
How to solve the problem of "Error: NetworkError" when using axios in Vue application? In the development of Vue applications, we often use axios to make API requests or obtain data, but sometimes we encounter "Error: NetworkError" in axios requests. What should we do in this case? First of all, you need to understand what "Error:NetworkError" means. It usually means that the network connection
Efficiently utilize Vue and Axios to implement batch processing of front-end data
Jul 17, 2023 pm 10:43 PM
Efficiently utilize Vue and Axios to implement batch processing of front-end data. In front-end development, data processing is a common task. When we need to process a large amount of data, processing the data will become very cumbersome and inefficient if there is no effective method. Vue is an excellent front-end framework, and Axios is a popular network request library. They can work together to implement batch processing of front-end data. This article will introduce in detail how to efficiently use Vue and Axios for batch processing of data, and provide relevant code examples.
How to use vue3+ts+axios+pinia to achieve senseless refresh
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia realizes senseless refresh 1. First download aiXos and pinianpmipinia in the project--savenpminstallaxios--save2. Encapsulate axios request-----Download js-cookienpmiJS-cookie-s//Introduce aixosimporttype{AxiosRequestConfig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
What is the parameter passing specification for Java axios and spring front-end and back-end separation?
May 03, 2023 pm 09:55 PM
1. The axios parameter transfer method corresponding to the @RequestParam annotation takes the following Springjava code as an example. The interface uses the POST protocol, and the parameters that need to be accepted are tsCode, indexCols, and table. For this Spring HTTP interface, how should axios pass parameters? How many methods are there? Let’s introduce them one by one. @PostMapping("/line")publicList
How do the axios and SpringBoot front-ends call the back-end interface for data interaction?
May 13, 2023 am 10:34 AM
1. Introducing a complete system, front-end and back-end interaction is essential. This process can be divided into the following steps: the front-end initiates a request to the back-end. After the back-end interface receives the front-end parameters, it begins to call methods layer by layer to process the data. The back-end will The final data is returned to the front-end interface. After the front-end request is successful, the data is rendered to the interface. 2. Project structure Front-end technology: axios Back-end technology: SpringBoot (This does not matter, but you must have an access path to the control layer, which is the so-called request. The address corresponding method can use SSM framework, SSH framework, etc.) The above is the general file structure. I believe that everyone’s back-end data processing will be fine. It is nothing more than: the control layer receives the front-end request and calls the corresponding business layer interface method. layer implementation
