Vue - Axios network encapsulation module

Functional characteristics

1. Send... In browser XMLHttpRequests request
2. stay node.js Total send http request
3. Support Promise API
4. Intercept requests and responses
5. 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)
}