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组件】