axios请求方式
axios(config):默认为get请求
axios.get(),axios.post(),axios.delete()等等
axios使用
安装
npm install axios --save
简单使用
导入axios,然后调用,默认为get请求
import axios from 'axios'
axios({
url:'http://123.1.1.213:8000/home',
//专为get请求进行拼接
params:{
type:'123',
page:1
}
}).then(res=>{
console.log(res);
})
axios发送并发请求
//axios发送并发请求
axios.all([
axios({
}),
axios({
})
]).then(results =>{
console.log(results);
console.log(results[0]);
console.log(results[1]);
})
或者使用
.then(axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
}))
只有两个同时完成后才能调用then
全局配置
设置全局配置
axios.defaults.baseURL = "http://123.1.1.3"
axios.defaults.timeout = 1000
常见的配置选项
url,method,baseURL,transformRequest,transformRespose,headers,params,timeout,等
如果post,后面使用data
如果get,后面使用params
axios实例
const axiosinstace = axios.create({
baseURL:"http://123.1.1.3:8000",
timeout:1000
})
axiosinstace({
url:'/home/data',
params:{
type:'123'
}
}).then(res =>{
console.log(res);
})
每一个实例有自己独立的配置
axios封装
src下建立一个newwork文件夹,里面添加文件配置axios
import axios from 'axios'
export function insance1(config,success,failure) {
//创建实例
const instance = axios.create({
baseURL:'http://123.1.1.1',
timeout:1000
})
//发送请求
instance(config).then(res =>{
success(res)
}).catch(err =>{
failure(err)
})
}
import {insance1} from './network/request'
insance1({
url:'/home'
},res=>{
console.log(res);
},err=>{
console.log(err);
})
可以使用Promise
import axios from 'axios'
export function insance1(config,success,failure) {
//创建实例
const instance = axios.create({
baseURL:'http://123.1.1.1',
timeout:1000
})
//发送请求
return instance(config)
}
import {insance1} from './network/request'
insance1({
url:'/home'
}).then(res =>{
console.log(res);
}).catch(err =>{
console.log(err);
})
axios拦截器
请求成功和失败,响应成功和失败四个拦截