Functional characteristics
- Send... In browser XMLHttpRequests request
- stay node.js Total send http request
- Support Promise API
- Intercept requests and responses
- Transform the request and response data
axios Request mode
Support multiple request methods
axios(config)
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])
install 、 Use axios frame
npm install axios --save
After the main.js
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
// Default here axios(config) Method
axios({
url:' Server address ',
method:'post' // Request method The default is get
}).then(res => {
console.log(res); // return promise
})
axios({
url:' Server address ',
// special get Requested parameter splicing
params:{
type:'pop',
page: 1
}
}).then(res => {
console.log(res);
})
Send concurrent requests
- Use axios.all You can put multiple request arrays
- axios.all([]) The returned result is an array , Use axios.spread You can put arrays [res1,res2] an
It's also in main.js Next
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
axios.all([axios({
url:' Server address '
}),axios({
// special get Requested parameter splicing
params:{
type:'pop',
page: 3
}
})]).then(result => {
console.log(result);
console.log(result[0]);
console.log(result[0]);
})
/* Use axios.spread an result */
axios.all([axios({
url:' Server address '
}),axios({
// special get Requested parameter splicing
params:{
type:'pop',
page: 3
}
})]).then(axios.spread((res1, res2)) => {
console.log(res1);
console.log(res2);
})
The extraction of common parts
in fact , Many parameters in development are fixed , You can extract or axios Global configuration for
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
// Common configuration
axios.defaults.baseURL = ' Address '
axios.defaults.timeout = 100 // Request access timeout
axios({
// baseURL: , It can also be written here
url:' Server address ',
method:'post' // Request method The default is get
}).then(res => {
console.log(res); // return promise
})
Common configuration options
Use it to check the document
Method | grammar |
---|---|
Request address | url:'/user', |
Request type | method:'get', |
Request root path | baseURL:‘ Address ’, |
Data processing before request | transformRequest:[function(data){}], |
Data processing after request | transformResponse:[function(data){}], |
Custom request header | headers:{'x-Requested-With':'XMLHttpRequest'}, |
URL Query object | params:{id:123}, |
Query object serialization function | paramsSerializer:function(params){} |
request body | data:{key:'aa'}, |
timeout s | timeout:1000, |
Whether cross domain brings token | withCredentials:false, |
Custom request processing | adapter:function(resolve,reject,config){}, |
Authentication information | auth:{uname:'',pwd:'12'}, |
Response data format json/blob/docuent/arraybuffer/text/stream | responseType:'json', |
Create the corresponding axions example
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
// Create the first instance
const instance1 = axios.creat({
baseURL: ' Server address ',
timeout: 1000
})
instance1({
url: ' The subsequent address concatenated with the server address '
}).then(res => {
console.log(res);
})
instance1({
url: ' The following address can be different from the above example ',
params:{
type: 'pop',
page: 1
}
}).then(res => {
console.log(res);
})
// Create instances of different configurations
const instance2 = axios.creat({
baseURL: ' Address ',
timeout: 10000,
headers: {}
})
Encapsulate the network request module
Normal in app.vue Request network data with low reusability
<template>
<div id="app">
<div>{{result}}</div>
</div>
</template>
<script>
import axios from 'axios'
export default{
name:'App',
components:{
},
data(){
return{
result:''
}
},
created(){
axios({
url:' Server address '
}).then(res => {
console.log(res);
this.result = res;
})
}
}
</script>
establish network
Folder , And create request.js
Request configuration for
import axios from 'axios'
/******************************/
// Method 1 //
/*****************************/
export function request(config, success, failure){
// 1. establish axios Example
const instance = axios.creat({
baseURl: ' Server address ',
timeout: 100
})
// Send real network requests
instance(config)
.then(res => {
//console.log(res);
success(res)
})
.catch(err => {
//cnsole.log(err);
failure(err)
})
}
/******************************/
// Method 2 //
/*****************************/
export function request(config){
// 1. establish axios Example
const instance = axios.creat({
baseURl: ' Server address ',
timeout: 100
})
// Send real network requests
instance(config.baseConfig)
.then(res => {
//console.log(res);
config.success(res)
})
.catch(err => {
//cnsole.log(err);
config.failure(err)
})
}
/******************************/
// Method 3 promise Method 【 recommend 】 //
/*****************************/
export new Promise((resolve, reject) => {
// 1. establish axios Example
const instance = axios.creat({
baseURl: ' Server address ',
timeout: 100
})
// Send real network requests
instance(config) // Here or directly return instance(config) The return value here is promise
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
}
And request where it needs to be used
import {request} from "./network/request";
/******************************/
// Method 1 Corresponding request method //
/*****************************/
request({
url: '/home/multidata'
}), res => {
console.log(res);
}, err => {
console.log(err);
}
/******************************/
// Method 2 Corresponding request method //
/*****************************/
request({
caseConfig:{
},
success: function(res){
},
failure: function(err){
}
})
/******************************/
// Method 3 promise Corresponding request method //
/*****************************/
request({
url:' Address '
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
Block network requests
Request to intercept
import axios from 'axios'
export function request(config){
// 1. establish axios Example
const instance = axios.creat({
baseURl: ' Server address ',
timeout: 100
})
// 2. axios Interceptor
instance.interceptors.request.use(config => {
console.log(config);
// - such as config Some of the information in does not meet the requirements of the server
// - For example, every time a network request is sent , Display the request icon in the interface
// - Some network requests ( For example, login. token) You have to carry something
return config
}), err => {
console.log(err);
}
// 3. Send real network requests
return instance(config)
}
The response to intercept
import axios from 'axios'
export function request(config){
// 1. establish axios Example
const instance = axios.creat({
baseURl: ' Server address ',
timeout: 100
})
// 2. axios Interceptor
instance.interceptors.response.use(res => {
console.log(res);
return res.data // Return useful information
}), err => {
console.log(err);
}
// 3. Send real network requests
return instance(config)
}