Vue异步请求

Vue发送异步请求

使用axios发送（常用）

安装axios：npm i axios
引入axios：import axios from ‘axios’

发送请求：

axios.get('http://localhost:5000/students').then(
          response => {
            console.log('请求成功了',response.data)
          },
          error => {
            console.log('请求失败了',error.message)
          }
        )

使用vue-resource发送

安装vue-resource：npm i vue-resource

使用该插件：

//引入插件
import vueResource from 'vue-resource'
//使用插件
Vue.use(vueResource)

发送请求：(跟axios一样)

this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
					response => {
						console.log('请求成功了')
						//请求成功后更新List的数据
						this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
					},
					error => {
						//请求后更新List的数据
						this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
					}
				)

解决跨域请求

cors（由后端处理，带一个响应头出来让浏览器知道允许该请求带走数据）
jsonp（只能解决get请求，而且需要前后端都操作）
配置代理服务器（实现方式有：1.nginx 2. vue-cli）

Vue-cli配置代理

利用代理服务器来解决跨域问题，让代理服务器与前端保持同源，然后代理服务器直接与后端服务器交互（不受同源策略约束）

实现方式1：

修改vue-cli的全局配置：

//配置开启中间代理服务器（并指定该服务器与后端哪个服务器交互）
//并且只有当请求的资源代理服务器中没有时才会与后端服务器交互（一定要防止代理服务器顶替了需要向后端请求的资源）
//所以不太灵活
devServer:{
    proxy:'http://localhost:5000'
}

重启vue-cli
重新发送请求(注意端口是自己前端服务器的端口)

实现方式2：

修改vue-cli的全局配置：

//'/api'请求前缀跟在端口号后面，如果请求带了该前缀表示需要向后端请求 并且可以配置多个前缀
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', 
        pathRewrite:{'^/api':''}, //清除请求前缀
        ws: true,  //用于支持websocket
        changeOrigin: true //是否谎报请求路径
      },
      '/demo': {
        target: 'http://localhost:5001', 
        pathRewrite:{'^/demo':''}, //清除请求前缀
        ws: true,  //用于支持websocket
        changeOrigin: true //是否谎报请求路径
      }
    }
  }