ajax 请求方式梳理

`常用的ajax请求方式：`

1. xhr: new XMLHttpRequest() xhr.open() xhr.send()
2. jQuery: $.get $.post
3. axios：优点：promiss风格 支持请求拦截器和响应拦截器 体积小(jQuery的四分之一)
4. fetch：promiss风格
5. vue-resource: vue里的插件,也是promiss风格,在vue 1.0中使用频率最高，后续很少使用到了，官方也不在维护，交由其他团队维护，但维护更新频率也少了，详情查看github上vue-resource相关内容
总结：
jQuery和axios以及vue-resource都封装了xhr
在react和vue里极少使用jQuery请求，因为jQuery库的核心是封装DOM操作，然而使用react和vue时的目的恰好与之相反，是为了减少DOM操作，所以在react和vue里使用jQuery库是不合适的
jQuery、axios都是对xhr的封装，而fetch不是
fetch的问题：
(1). 会将返回的数据包2层promiss，得2次.then才能拿到数据；
(2). fetch不能兼容IE浏览器
vue-resource：
(1). 安装：npm i vue-resource
(2). 引入：main.js里引入：import vueResource from 'vue-resource'
(3). 使用：Vue.use(vueResource)
(4). 使用后在VC身上能找到$http属性，即表示使用成功
(5). 相关代码使用：和axios用法相同

<script>
  export default {
     methods: {
        searchUsers() {
           //axios用法
           axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
	           response => {
	                 console.log('请求成功了')
	              },
	              error => {
	                 console.log('请求失败了')
	              }
           )
           //vue-resource用法
           this.$http.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
              response => {
                 console.log('请求成功了')
              },
              error => {
                 console.log('请求失败了')
              }
           )
        }
     }
  }
</script>

跨域问题：请求报错中含有Access-Control-Allow-Origin是为跨域
跨域：请求发了，也送给了服务器，服务器也收到了请求同时服务器也将数据交给了浏览器，
但浏览器没有返回给你，浏览器发现跨域了，将数据保留了没有给到你而已

解决方法：
1. cors：不需要前端解决，是指写服务器的人在服务里给你返回响应的时候加几个特殊的响应头，cors解决跨域才是真正意义上的解决跨域
2. jsonp：借助<script>标签里的src属性，在引入外部资源的时候不受同源策略限制的特点解决跨域的
但jsonp不但需要前端人员用特殊写法，也需要后端人员配合，即需要前端和后端一起解决，同时jsonp也只能解决get的跨域问题，post跨域解决不了
3. 配置代理服务器：
方法一： nginx 反向代理
方法二：vue-cli: vue脚手架