axios 请求(get,post,put,patch)
get请求的两种方法:
// http://localhost:8080/data.json?id=12
axios.get('/data.json', {
params: {
id:12
}
}).then((res) => {
console.log(res)
})
axios({
method:'get',
url:'/data.json',
params: {
id:12
}
}).then(res=>{
console.log(res)
})
// post
// from-data 表单提交(图片上传、文件上传)
// application/json 大多数使用的,传递json数据
let data = {
id:12
}
axios.post('/post', data).then(res=>{
console.log(res)
})
axios({
method:'post',
url:'/data',
data:data
}).then(res=>{
console.log(res)
})
// from-data 表单提交
let formData = new FormData()
for(let key in data) {
formData.append(key, data[key])
}
axios.post('/post', formData).then(res=>{
console.log(res)
})
// 并发请求:同时进行多个请求,统一处理返回值
// axios.all() axios.spread()
axios.all(
[
axios.get('/data.json'),
axios.get('/city.json')
]
).then( // 分割不同请求的返回值
axios.spread((dataRes, cityRes) => {
console.log(dataRes, cityRes)
})
)
axios实例, 基本的参数:
import axios from 'axios'
export default {
name:'axios9-1',
created() {
let instance = axios.create({
baseURL:'http://localhost:8080', //请求的基本地址
timeout:1000, // 请求超时时长ms
url:'/data.json', // 请求路径
method:'get,post,put,patch,delete', // 请求方法
headers: {
token:'abc'
}, // 请求头
params: {}, // 将请求参数拼接在url上
data:{} // 把请求参数放在请求体里面
})
instance.get('/data.json').then(res=>{
console.log(res);
})
// 1.axios 全局配置-优先级低
axios.defaults.timeout = 1000
axios.defaults.baseURL = 'http://localhost:8080'
// 2.axios 实例配置-优先级中
let instance = axios.create()
instance.defaults.timeout = 3000
instance.defaults.baseURL = 'http://localhost:8080'
// 3.axios 请求配置-优先级高
instance.get('/data.json', {
timeout:5000
})
},
}
// 实际开发中
let instance = axios.create({
baseURL = 'http://localhost:8090',
timeout: 1000
})
let instance2 = axios.create({
baseURL = 'http://localhost:8080',
timeout: 3000
})
// instance包含的参数:baseUrl,timeout,url, method, params
instance.get('/contactList', {
params: {}
}).then((res)=>{
console.log(res)
})
// instance包含的参数: baseUrl, timeout,method,params.
instance2.get('/orderList', {
timeout: 10000
}).then((res)=>{
console.log(res)
})
==================拦截器的使用==============================
axios 拦截器
<script>
//在请求或响应被处理前拦截他们。
// 请求拦截器,响应拦截器
import axios from 'axios'
export default {
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.request.use(config=> {
config.headers ={
auth:true
}
return config
})
// 取消上面定义的拦截器
axios.interceptors.request.eject(interceptors)
// 下面then中的res,就是上面返回的res
axios.get().then(res=> {
}).catch(err=> { // 请求失败处理
})
// eg: 需要登录状态(token:'')
let instance = axios.create({})
instance.interceptors.request.use(config => {
config.headers.token = 'abc'
return config
})
// 不需要登录的接口
let newInstance = axios.create({})
// 移动端开发,请求前显示弹框,请求后隐藏弹框
let instance_phone = axios.create({})
instance_phone.interceptors.request.use(config => {
$('#modal').show()
return config
})
instance_phone.interceptors.response.use(res=> {
$('#modal').hide()
return res
})
}
}
<script>
axios 错误处理
// 请求错误时,进行的处理
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=> { // 上面2个错误处理,都将进入catch处理
console.log(err)
})
// eg:实际开发过程中,添加统一错误处理
let instance = axios.create({})
instance.interceptors.request.use(config => {
return config
}, err=> { // 请求错误
// 请求错误,一般错误码以4开头:401超时,404not found
$('#modal').show()
setTimeout(()=> {
$('#modal').hide()
}, 2000)
return Promise.reject(err)
})
instance.interceptors.response.use(res => {
return res
}, err=> { // 响应错误处理,一般http状态码,以5开头,500系统错误,502系统重启
$('#modal').show()
setTimeout(()=> {
$('#modal').hide()
}, 2000)
return Promise.reject(err)
})
// 不需要单独做错误处理,如需要可单独添加catch处理
instance.get('/data.json').then((res)=>{
console.log(res)
})
}
取消axios网络请求,取消正在进行的http请求。
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')
// 可能用到取消请求
}