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

在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的请求,这个是跨域请求做本地代理的请求方式

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容