Axios从远程位置读取数据

学习Axios的知识，从页面的远端阅读数据。可以通过调用相应的页面来检索后端数据。在实际开发中，这些后端数据需要由后端程序员和你一起讨论和产生。现在我们只做前端，只要能调用数据。

安装Axios

我们使用npm安装直接进行安装。

cnpm安装axios保存

Axios需要打包到生产环境中，所以我们使用- save来安装它。

介绍Axios(在哪个模块中使用，在哪个模块中介绍)

Axios被引入。vue页面。因为npm用于安装，所以不需要在这里填写路径。

服务器提取数据

(在实际项目中，这个后台接口地址是由后端程序员提供给你的)

可以把后台给定的地址放在地址栏中访问，可以正常访问，输出json格式的字符串，就是我们需要的远程数据。这里我们使用Axios的get方法来获取数据。

created(){ axios . get(' http://js pang.com/demo API/oftengods . PHP ')//然后成功；成功响应后的返回值(对象)。然后(响应={console.log(响应)；this . oftengoods=response . data；})//get失败。catch(错误={ console.log(错误))；警报('网络错误，不可访问')；})}，将axios方法写入创建的hook函数，我们使用get方法拉取数据，如果拉取成功，则使用远程数据将值赋给oftenGoods。

拉动报错，一般有两种情况：

网络阻塞：网络状况不是很好，故障后每5秒钟可以再次请求。拒绝访问：这多半是因为后端程序员设置了跨域访问，需要和后端程序员一起调试解决。提取分类商品数据：

Get仍然用于拉动。拉取后，先用consoe.log(response)检查数据结构，然后赋值。

在此发布不同的分类代码以进行提取和分配：

//阅读分类商品列表axios . get(' http://js pang.com/demo API/typegoods . PHP ')。然后(响应={console.log(响应)；//this . oftengoods=response . data；this . TYPe 0 GOODs=response . data[0]；this . type 1 GOODs=response . data[1]；this . type 2 goods=response . data[2]；this . type 3 GOODs=response . data[3]；}) .catch(错误={ console.log(错误))；警报('网络错误，不可访问')；})html模板输出代码：

ul class=' cook list ' Li v-for=' TYPe 3 GOODs '中的商品Span class=' food IMg ' img : src=' http : GOODs . GOODIMg ' width=' 100% '/Span Span class=' food name ' { GOODs。good name } }/span span class=' food price '{ { goods。价格}}元/span /li/ul，如有不足，敬请指教！希望给大家带来帮助！

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接