axios的基本使用
安装
//npm方式引用
npm config set registry https://registry.npm.taobao.org //设置npm为淘宝源
npm install axios --save
//script引入方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
get方式
//方式一
axios.get('api/auth/login?userName=Admin&passWord=123456')
.then(value => {
console.log('成功后的回调')
console.log(value)
})
.catch(reason => {
console.log('发生异常后的回调')
console.log(reason)
});
//方式二
axios.get('api/auth/login', {
userName: this.userName,
password: this.password
}).then(value => {
console.log('成功后的回调')
console.log(value)
}).catch(reason => {
console.log('发生异常后的回调')
console.log(reason)
})
post方式
axios.post('api/auth/login', {
userName: this.userName,
password: this.password
}).then(value => {
console.log('成功后的回调')
console.log(value)
}).catch(reason => {
console.log('发生异常后的回调')
console.log(reason)
})
通过配置属性发生请求
axios({
method: 'post', //默认是get方式
url: 'api/auth/login',
data: {
userName: 'Admin',
passWord: '123456'
}
}).then(value => { //成功后的回调 也可以不写
}).catch(reason => { //发生异常后的回调 也可以不写
})
拦截器的使用
//request拦截器
axios.interceptors.request.use(config => {
//请求发送之前回调
return config;
},error => {
//请求发送异常回调
return Promise.reject(error);
});
//response拦截器
axios.interceptors.response.use(response => {
//收到回复后的回调
return response;
},error => {
// response异常的回调
return Promise.reject(error);
});
通过创建实例发送请求
//创建实例
const http= axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
//通过http实例来请求 默认就有了创建时的配置
http({
method: 'get',
url: 'api/dev/modules',
data: {
userName: 'Admin',
passWord: '123456'
}
}).then(value => {
}).catch(reason => {
})
//实例也能使用拦截器
http.interceptors.request.use(config => {
return config;
},error => {
return Promise.reject(error);
});
http.interceptors.response.use(response => {
return response;
},error => {
return Promise.reject(error);
});