如何在用webpack打包好的项目中使用axios渲染页面

250 阅读1分钟

1、安装axios包:

npm i axios -S

2、导入axios请求库:

import axios from 'axios'

3、用一个方法封装请求数据(调用axios)

注意:axios对象返回值为Promise对象,可以使用async/await进行简化,并使用结构赋值将data属性从axios封装的对象中解构出来。(还可以把解构出来的data属性使用冒号进行重命名。如: {data:res} )

4、在生命周期函数created()函数中该调用方法(此时组件的props/data/methods已创建好,都可用,而组件模板结构未生成,适合请求数据)

注意:只要请求回来的数据,在页面渲染期间要用到,则必须转存到data中。

5、将请求回来的数据,转存到data中

6、再用data中的数据渲染页面

此外,利用axios向接口服务器请求数据返回的并不是原数据,而是axios封装后的数据,原数据在请求回来的对象的data节点下。

PS:若以上知识有误,还请指正。谢谢!