axios实例
创建实例
<template>
<div class="home">
</div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios';
export default {
// axios实例
// 后端接口地址有多个，并且超时时长不一样
name: 'axios3-1',
created() {
let instance1 = axios.create({
baseURL: 'http://localhost:8080',
timeout: 1000,
})
let instance2 = axios.create({
baseURL: 'http://localhost:8081',
timeout: 5000,
})
instance1.get('/data.json').then(res=>{
console.log(res)
})
},
}
</script>
实例相关配置
<template>
<div class="home">
</div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios';
export default {
// axios实例相关配置
name: 'axios3-2',
created() {
axios.create({
baseURL: 'http://localhost:8080', //请求的域名，基本地址
timeout: 1000, //请求超时时长（ms）
url: '/data.json', //请求路径
method: 'get, post, put, patch, delete', //请求方法
headers: {
token: '',
}, //设置请求头
params: {
}, //请求参数拼接在url上
data: {
}, //请求参数放在请求体
})
// 相当于添加上面的配置信息
// axios.get('/data.json',{
// params:{},
// })
// 1.axios全局配置
axios.defaults.timeout = 1000;
axios.defaults.baseURL = 'http://localhost:8080';
// 2.axios实例配置
let instance = axios.create();
instance.defaults.timeout = 3000;
// 3.axios请求配置
instance.get('/data.json',{
timeout: 5000,
})
},
}
</script>
常用参数配置具体使用方法
<template>
<div class="home">
</div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios';
export default {
// axios实例相关配置
name: 'axios3-2',
created() {
axios.create({
baseURL: 'http://localhost:8080', //请求的域名，基本地址
timeout: 1000, //请求超时时长（ms）
url: '/data.json', //请求路径
method: 'get, post, put, patch, delete', //请求方法
headers: {
token: '',
}, //设置请求头
params: {
}, //请求参数拼接在url上
data: {
}, //请求参数放在请求体
})
// 相当于添加上面的配置信息
// axios.get('/data.json',{
// params:{},
// })
// 1.axios全局配置
axios.defaults.timeout = 1000;
axios.defaults.baseURL = 'http://localhost:8080';
// 2.axios实例配置
let instance = axios.create();
instance.defaults.timeout = 3000;
// 3.axios请求配置
instance.get('/data.json',{
timeout: 5000,
})
//实际开发
//有两种请求接口
//http://localhost:9090
//http://localhost:9091
let instance1 = axios.create({
baseURL: 'http://localhost:9090',
timeout: 1000,
})
let instance2 = axios.create({
baseURL: 'http://localhost:9091',
timeout: 3000,
})
//baseUrl, timeout, url, method, params
instance1.get('/contactList', {
params: {},
}).then((res)=>{
console.log(res)
})
//baseUrl, timeout: 5000, method, url
instance2.get('/orderList', {
timeout: 5000,
}).then((res)=>{
console.log(res)
})
},
}
</script>
拦截器
<template>
<div class="home">
</div>
</template>
<script>
// @ is an alias to /src
// 拦截器：在请求或响应被处理前拦截它们
// 请求拦截器，响应拦截器
import axios from 'axios';
export default {
name: 'axios3-3',
created() {
// 请求拦截器
axios.interceptors.request.use(config=>{
// 在发送请求前做些什么
return config
},err=>{
// 在请求错误的时候做些什么
return Promise.reject(err)
})
// 响应拦截器
axios.interceptors.response.use(res=>{
// 请求成功对响应数据做处理
return res
},err=>{
// 响应错误做些什么
return Promise.reject(err)
})
// 取消拦截器（了解）
let interceptors = axios.interceptors.response.use(config=>{
config.headers={
auth: true,
}
return config
})
axios.interceptors.response.eject(interceptors)
//实际开发
//登录状态（token: ''），访问需要登录的接口
let instance = axios.create({})
instance.interceptors.request.use(config=>{
config.headers.token = '';
return config;
})
//访问不需要登录的接口
let newInstance = axios.create({})
// 移动端开发
let instance_phone = axios.create({})
instance_phone.interceptors.use(config=>{
$('#modal').show()
return config
})
instance_phone.interceptors.response.use(res=>{
$('#modal').hide()
return res
})
},
}
</script>
错误处理
<template>
<div class="home">
</div>
</template>
<script>
// @ is an alias to /src
// 错误处理：请求错误时进行的处理
import axios from 'axios';
export default {
name: 'axios3-4',
created() {
//请求
axios.interceptors.request.use(config=>{
return config
},err=>{
return Promise.reject(err)
})
//响应
axios.interceptors.response.use(res=>{
return res
},err=>{
return Promise.reject(err)
})
axios.get('/data.json').then((res)=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
//例子：实际开发过程中，一般添加统一错误处理
let instance = axios.create({})
instance.interceptors.request.use(config=>{
return config
},err=>{
//请求错误处理，一般http状态码以4开头，常见：401超时，404 not found
$('#model').show()
setTimeout(()=>{
$('#model').hide()
},2000)
return Promise.reject(err)
})
instance.interceptors.response.use(res=>{
return res
},err=>{
//响应错误处理，一般http状态码以5开头，500系统错误，502系统重启
$('#model').show()
setTimeout(()=>{
$('#model').hide()
},2000)
return Promise.reject(err)
})
// 上面已经做了错误处理，实际使用时不需写catch，除非有特殊的需要处理才添加catch
instance.get('/data.json').then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
}
</script>
取消请求
<template>
<div class="home">
</div>
</template>
<script>
// @ is an alias to /src
// 用于取消正在进行的http请求（了解）
import axios from 'axios';
export default {
name: 'axios3-5',
created() {
let source = axios.CancelToken.source()
axios.get('/data.json',{
cancelToken: source.token
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
//取消请求(message可选)
source.cancel('cancel http')
//什么情况下可能用到取消请求：CRM操作的时候
},
}
</script>
略懂，略懂....
