vue.js javascript Vue-Ajax核心知识整理

在Vue框架中可以有很多方式实现 ajax, 其中有xhr、jQuery、fetch、axios、vue-resource, 其中Vue的作者尤雨溪推荐使用axios，所以在使用Vue框架时，尽量还是使用axios

但是当我们使用ajax时，经常会遇到跨域的问题，比如你本地的端口号是8080， 而服务器的端口号是5050，当你向服务器请求数据时，就会存在跨域的问题。

跨域也有很多的解决方案：

【1】cors方法：不需要前端人员操作，只需要后端人员在写服务器的时候，给你返回响应的时候，会加几个特殊的响应头；

【2】jsonp: 需要后端人员和前端人员都进行相应的操作，不常用  只能解决 GET 请求的跨域问题，其它的请求方式解决不了。

【3】代理 proxy: 在Vue框架中经常使用

因为服务器和服务器之间的数据传输并不是用的ajax，仅仅用的是http,所以不存在跨域的问题，这样本地端口向代理服务器发起请求，而代理服务器目标服务器请求，这样就解决了跨域问题。

1 配置代理服务器

在vue.config.js 中配置

// 1. 开启代理服务器，解决跨域问题（方式一）

devServer: {

proxy: 'http://localhost:5000' // 需要转发的服务器的端口

},

// 2.开启代理服务器（方式二）

devServer: {

proxy: {

'/api': { // /api为请求前缀，想要走代理，就在请求的地址前面加上/api，前缀可以根据需要更改

target: '', // 为请求的目标地址，比如：http://localhost:5000

pathRewrite: {

'^/api': '' // 去掉请求路径中的/api

},

ws: true, // 用于支持websocket

changeOrigin: true // 用于控制请求头中host值

},

// 配置多个

'/api2': { // /api为请求前缀，想要走代理，就在请求的地址前面加上/api，前缀可以根据需要更改

target: '', // 为请求的目标地址，比如：http://localhost:5000

pathRewrite: {

'^/api': '' // 去掉请求路径中的/api

},

ws: true, // 用于支持websocket

changeOrigin: true // 用于控制请求头中host值

}, // 配置多个...

// '/foo': {

// target: ''

// }

}

}

建议使用方式2，可以配置多个代理服务器，还有一个问题就是当请求的资源本地有时，会优先读取本地得信息，不会走代理，这样就不会读取到服务器中真实的信息。所以如果想要指定走代理的话，需要指定请求前缀。

2 请求github数据案例

【List组件】

【Search组件】

【App组件】

3 插槽

3.1 默认插槽

【App组件】

【Category组件】

3.2 具名插槽

【App组件】

【Category组件】

3.3 作用域插槽

【Category组件】

【App组件】

相关链接