美文网首页
vue项目里面的axios的请求总结

vue项目里面的axios的请求总结

作者: 布林美美 | 来源:发表于2017-10-24 10:33 被阅读0次

    在vue项目中,一般的请求方式有四种:(最重要的是第四种)

    1.对本地数据请求(json)

    待续

    2.对模拟数据的请求(mock)

    待续

    3.对第三方数据的抓取(jsonp)

    首先明确一点,jsonp只是针对get请求的(/src/common/js/jsonp.js)

    思路:原理其实实现就是jsonp最原始的请求,但是对其进行一个比较好的封装,可以直接拿来用,通常把这个方法放在一个公用的js中

    运用到代码中:第一张图是在页面的组件的vue文件中运用(/src/components/recommend/recommend.vue),第一张图是在这个组件对于的js中对方法进行传参(里面的object.assign方法是object自带一个方法,自己上网百度学习,其实就是将所有的参数对象整合成一个object)——对应我的项目中的/src/api/recommend.js

    其实还有一种做法,不确定是什么请求,但是确实可以请求到第三方的数据,不是jsonp的返回格式,上面那种是针对第三方接口返回的是jsonp的模式,可能下面这种更加通用的东西

    1.首先找到build里面的dev-server.js

    1.引入axios的插件 添加请求路由

    2.在想要的组件的js中添加这个请求(我个人理解跟代理很相似)

    请求数据,注意这个url里面的getDiscList路径上上图中配置的

    4.对项目的数据的对接(跨域问题)

    因为我们在项目中,如果在自己的本地安装vue的话,怎么去请求后台接口的数据尼,如果在本地的开发的话,就会涉及到跨域问题

    怎么去解决这个问题,我自己也是去网上搜索了很久:

    最后找到一种方法就是对vue项目的跨域的部分进行修改:

    1.首先找到config里面的index.js文件,然后对proxyTable进行修改,记得注意一点,我觉得这个api这个命名是不能修改的,因为我改了就报错了,不晓得为啥。大家尽量去用api吧!!!

    2.上面配置就可以发请求了

    发axios的请求,这个是跨域请求做本地代理的请求方式

    这样的话就可以成功了,真的很简单,我却弄了很久。。。。

    相关文章

      网友评论

          本文标题:vue项目里面的axios的请求总结

          本文链接:https://www.haomeiwen.com/subject/bchtpxtx.html