axios用法及原理

119 阅读1分钟

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)})