axios请求数据

落日映苍穹つ 2022-12-20 12:55 148阅读 0赞

自从用饿了么框架重构项目以来，遇到 很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~

Element UI手册：[https://cloud.tencent.com/developer/doc/1270][https_cloud.tencent.com_developer_doc_1270]  
github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

vue2.0官方网站：[http://caibaojian.com/vue/guide/installation.html][http_caibaojian.com_vue_guide_installation.html]  
element-ui官方网站：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

--------------------

1：进入项目，npm安装

npm install axios --save

![52de8d0715b848a073f94015589006d1.png][]

2.在main.js下引用axios

import axios from 'axios'

![1ce7ee86f98cd8515c58da658f442fd4.png][]

3:准备json数据  
自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据  
http://47.xxx.xx.78:8091/ConfigServer/picture.action

4：跨域问题，设置代理，利用proxyTable属性实现跨域请求  
在config/index.js 里面找到proxyTable ：\{\} ，然后在里面加入以下代码  
（这里处于安全考虑，我隐藏了自己的而服务器域名，如果需要测试，改成你自己的即可）

proxyTable: {
      '/api': {
         target: 'http://x.xx.xx.78:8091',//设置你调用的接口域名和端口号 
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': '' //这个是定义要访问的路径，名字随便写 
        }
      }
    },

![f3aca13f8ea1fed667267e152307d351.png][]

5:打开一个界面picture.vue，开始写请求数据的方法

methods: {
                getData() {
                    axios.get('/api/ConfigServer/picture.action').then(response => {
                        console.log(response.data);
                    }, response => {
                        console.log("error");
                    });
                }
            }

![f457bedd133cc32fab0a7a077a947e75.png][]

picture.vue参考代码：

<template>
        <div id="app">
        </div>
    </template>
    <script>
        import axios from "axios";
        export default {
            name: "app",
            data() {
                return {
                    itemList: []
                }
            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    axios.get('/api/ConfigServer/picture.action').then(response => {
                        console.log(response.data);
                    }, response => {
                        console.log("error");
                    });
                }
            }
        }
    </script>

6：再次运行

npm run dev

运行成功之后，打开f12，查看network的请求  
这个时候，我们可以看见，本地的localhost替代 了我之前放在服务器上的链接的域名，这也是设置代理成功，就解决了跨域的问题了。

请求成功  
![7de0024a84f28fd0dfc4ef79bdddf612.png][]  
response里面也有返回值，ok,下一步就要开始将这些数据渲染在前端界面上面了。

![e470d0fbc11b678b023ecd6dd13ca1eb.png][]

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center][]

[https_cloud.tencent.com_developer_doc_1270]: https://links.jianshu.com/go?to=https%3A%2F%2Fcloud.tencent.com%2Fdeveloper%2Fdoc%2F1270
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[http_caibaojian.com_vue_guide_installation.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fcaibaojian.com%2Fvue%2Fguide%2Finstallation.html
[https_element.eleme.cn_zh-CN]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN
[52de8d0715b848a073f94015589006d1.png]: /images/20221120/54cd2ed3c5aa4e879221f672cc6f8486.png
[1ce7ee86f98cd8515c58da658f442fd4.png]: /images/20221120/85780178ce2a402f8869cc4b5b9d5883.png
[f3aca13f8ea1fed667267e152307d351.png]: /images/20221120/5f005e3402974ab0af3d61ef246c7f43.png
[f457bedd133cc32fab0a7a077a947e75.png]: /images/20221120/eb575a9f57f34c66815805f01253bae1.png
[7de0024a84f28fd0dfc4ef79bdddf612.png]: https://img-blog.csdnimg.cn/img_convert/7de0024a84f28fd0dfc4ef79bdddf612.png
[e470d0fbc11b678b023ecd6dd13ca1eb.png]: https://img-blog.csdnimg.cn/img_convert/e470d0fbc11b678b023ecd6dd13ca1eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201112175240459.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70#pic_center