axios原理
前提要了解promise的原理,可以看我的上一篇文章,也可以百度看下其他帖子后,再来了解axios。
axios是对promise的封装,axios返回的是一个promise对象。基于Vue开发的时候,采用axios向后台发送请求,内部也就是promise的异步操作,当后台返回成功的话,axios会在内部设置promise为成功的状态,而且axios返回的是一个promise对象,那么顺理成章的就可以调用promise的then(data)函数;若后台返回异常的话,那么可以调用promise的catch(err)函数。
例如:
axios({
url: 'http://localhost:9000/user/list',
method: 'get',
}).then(data => {
console.log('数据获取成功',data.data)
})``.catch(
err => {console.log('数据获取失败',err)
})
另一种写法:
axios.get('http://localhost:9000/user/list')
.then(data => {
console.log('数据获取成功',data.data)
})
.catch(
err => {console.log('数据获取失败',err)
})
axios基本设置
由于前端请求的路径会请求不同环境的后台服务,所以需要把服务的IP和PORT抽出来为统一的配置,这样不同环境下,去更改配置的地址就OK了,要不然需要去更改每个请求地址是很麻烦的。
const request = axios.create({ //它返回的是axios对象 baseURL: 'http://localhost:9000', timeout: 1000,//超时时间(单位:ms) headers: { 'token': 'sdfT988lfr' }})
request.get('/user/list').then(data => { console.log('数据获取成功',data.data)}).catch( err => {console.log('数据获取失败',err)})