1. Create a vue scaffolding
vue init webpack demo
Project root directory, then install axios
npm install axios -S
3. In
// Assign axios to the prototype of vue to facilitate call.$http = axios
4. At the call
methods:{
axiosGet(){
let that = this;
that.$('http://xxx..220:5678/api/user/login',{
"UserAccount": "string",
"UserPassword": "string"
}).then(function(response){
(response);
}).catch(function(error){
(error);
})
}
}
5. You can make some configurations in it
import qs from 'qs'
.$http = axios
.create({
baseURL:'.:5678/api',
//Processing data before request transformRequest:[function(data){
(data);
data=(data);
return data;
}],
//Request waiting timeout will be interrupted timeout: 1500,
//Data processing after request transformResponse: [function (data) {
(data);
return data;
}]
})
6. After configuration, you can omit some code at the call.
that.$http({
method: 'post',
//The path here is spliced with the baseURL in the url: '/user/login',
data: {
"UserAccount": "string",
"UserPassword": "string"
}
})
.then(function(response){
(response);
}).catch(function(error){
(error);
})
Supplement: Several ways to integrate axios by vue-cli
The Vue framework is now very popular in single-page applications.
How can projects created based on vue-cli better handle network requests?
Axios should be the first choice
This time, let’s introduce to newbies who are new to vue how to use axios in vue
If you install it, go to the official website.
1. Not recommended methods
//Import axios in the component to use network requestimport axios from 'axios'
export default {
name: 'HelloWorld',
data () {
return {
params:{}
}
},
methods: {
//Call network request here request(){
(`url${}`).then(result=>{
(result)
})
}
}
}
This method compares which file to use Muggleimport axios from 'axios' , but it is too complicated and not conducive to maintenance.
2. Few network requests
//Open the global import axiosimport Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
//Exist in prototype.$http = axios
// There are two ways to call it using other components of axios//Vue.$(`url${params}`)
//this.$(`url${params}`)
//But this will cause a problem. If you do this in a separate js file, $http cannot be called because there is no instance of Vue. In most cases, this method can meet most needs = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
3. Recommended method
Using Method 2 can already meet most of the needs, and it is also good to write, but if the interface changes later, you have to search and modify them one by one, which will appear very messy.
Here I recommend a way to do it myself
// Create a new JS named APIimport axios from 'axios'
//Import axios in the apilet base = '/v1'
//Write the entire project's network request in this file and export itexport const getproduct = params => { return (`${base}/product/info/${params}`) }
//This way, write to facilitate management of network requests for the entire project//If we use this request, for example, getproductimport {
getproduct
}from '../api/api';
export default {
name: 'HelloWorld',
data () {
return {
params:{}
}
},
methods: {
getProductList(){
getproduct().then(result=>{
(result);
})
}
}
}
//Note that we use it when exportingexport So you must bring it when importing{}
Summarize
The above is the operating methods of using axios by the editor to introduce to you by vue-cli and the various methods of integrating axios. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!