Vue CLI 系列之（十七）Vue 中的 ajax

Vue 中的 ajax

如何借助Vue脚手架解决ajax请求跨域的问题

node server.js 运行nodejs文件

一、常用的发送Ajax请求的方式

  • xhr：js中内置的

    new XMLHttpRequest()：windows对象身上的，可以直接用

    xhr.open()：配置请求信息

    xhr.send()：发送请求

  • JQuery：成型的第三方封装，对xhr的二次封装，核心是封装的DOM操作

    $.get、$.post

  • axios：对xhr的二次封装，promise风格的，支持请求拦截器和响应拦截器，体积小，约为JQuery的1/4【用的最多】

  • fetch：与xhr平级，也是windows对象身上的，可以直接用；也是promise风格的

    致命的问题：

    1. 返回的数据包两层promise

    2. 兼容性问题：不支持IE

  • vue-resource：vue 插件库, 对xhr的封装，promise风格的，vue1.x 使用广泛，Vue官方已不维护

    了解即可，已交由其他团队维护

二、使用axios发送Ajax请求

  1. 安装axios

npm i axios

  1. 引入axios

import axios from 'axios'

  1. 发送请求
// axios.get('http://localhost:8080/students')返回的是promise值
axios.get('http://localhost:8080/students').then(
  // response 成功的回调
  response =>{
    // response 响应对象
    console.log('请求成功了',response.data)
  },
  // error 失败的回调
  error =>{
    // 失败的原因
    console.log(error.message)
  }
)

出现了跨域的问题

跨域：违背了同源策略

同源策略：要求协议名、主机名、端口号必须一致

注：浏览器发现跨域了所以数据没有给我们

三、解决跨域

  1. cors：真正意义上的解决跨域

    通过服务器返回数据时携带特殊的响应头解决跨域，仅后端支持即可

    但这种方式会造成来自任意服务器的请求都能够拿到数据

  2. jsonp

    借助了script标签中的src属性在引入外部资源时不受同源策略限制这个特性实现的

    只能解决get请求跨域的问题，而且需要前后端配合

  3. 代理服务器

    原理图

    如何开启代理服务器？

    1）nginx

    2）vue-cli

四、使用vue-cli如何开启代理服务器？

1. 方式一

  1. 配置代理服务器
// vue.config.js

// 配置代理服务器
devServer: {
  // 代理服务器要把请求转发给谁，代理服务器的端口默认就是8080
  proxy: 'http://localhost:5000'
}

配置参考：https://cli.vuejs.org/zh/config/#devserver-proxy

注：vue.config.js改动后要重启应用

  1. 请求代理服务器
// 请求代理服务器
axios.get('http://localhost:8080/students').then(
  response =>{
    console.log('请求成功了',response.data)
  },
  error =>{
    console.log(error.message)
  }
)

使用方式一开启代理服务器的两个问题

1）代理服务器并不是把所有的请求都转发给目标服务器，不能灵活的控制请求是不是走代理

​ 当请求的资源，应用本身就有，代理服务器就不会进行转发

​ public目录就相当于应用服务器的根路径

2）不能配置多个代理【将同一个请求同时转发给多个目标服务器】

2. 方式二

// vue.config.js
devServer: {
  proxy: {
	// /api：请求前缀，想要走代理，请求时就加上该前缀，否则，就是不走代理，实现灵活控制请求是否走代理
	// 		 请求前缀的位置紧跟端口，请求前缀是指忽略了协议名、主机名、端口号的最前面
	'/api': {
	  // target：只要请求前缀是/api，就转发请求到该服务器
	  target: 'http://localhost:8080/students',
	  // 代理服务器收到请求前缀是/api的请求时，再转发到目标服务器之前将请求前缀去掉，如果不加该配置项，
	  // 代理服务器转发给目标服务器的路径中是包含了请求前缀的，会导致请求不到资源
	  pathRewrite: {'^/api':''},
	  // 用于支持websocket
	  // websocket：客户端与服务器之间通信的一种方式
	  // ws: true,
	  // changeOrigin：用于控制请求头中的host值，值为true，host值为代理服务器真实地址，值为false，host值为目标服务器地址
	  // Vue中默认值为true；React中默认值为false
	  // changeOrigin: true
	},
	'/foo': {
	  target: '<other_url>'
	}
  }
}

注：方式一与方式二不能同时使用

3. 总结

方法一

​ 在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

说明：

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 ；如果请求的资源前端存在，不会进行转发（优先匹配前端资源）

方法二

​ 编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径【仅包含协议名、主机名、端口号】
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，目标服务器收到的请求头【代理服务器转发给目标服务器的请求】中的host为：localhost:5000
   changeOrigin设置为false时，目标服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

  1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
  2. 缺点：配置略微繁琐，请求资源时必须加前缀。

五、axios应用-github搜索案例

Vue文件中的样式通常是程序员自己写的样式，第三方成型的样式比如bootstrap会放在一个公共的位置，第三方库放在哪？

  • src/assets

    注：如果要引入的资源中用到了不存在的资源，就不要放在该目录下

  • public/

引入静态资源

  • main.js【不推荐】

  • App组件中使用import语句引入

    【示例：import './assets/bootstrap.css'】

    注：通过import语句引入样式，Vue-cli会做非常严格的检查，引入的样式中只要用到了不存在的资源就会报错

  • public/index.html中使用link标签引入

    【示例：<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">】

    注：link标签的href属性中不要使用相对路径，使用<%= BASE_URL %>作为前缀的路径

静态资源放置的位置与引入静态资源的方式通常是搭配使用的，一般有两种方式

1）放在src/assets目录下，App组件中使用import语句引入

注：如果要引入的资源中用到了不存在的资源，就不要使用这种方式

比如引入的Bootstrap中引入了当前项目中不存在的资源，就会报错。

2）放在public/目录下，public/index.html中使用link标签引入

参照前面的Todo-list案例

实现静态组件

首先按功能点拆分组件，然后实现各组件

注：不要让App中最外层div的id与index.html中div的id是一样的

实现动态组件

数据放在哪

为什么项目中请求github提供的接口不会出现跨域问题？

github已经通过cors这种方式解决了跨域

数据驱动着页面的展示

不要直接操作vc._data【读或写】

掌握了任意组件间通信之后，数据放在哪个组件那就显得不那么重要了

六、使用vue-resource发送Ajax请求【了解即可】

  1. 安装vue-resource

    npm i vue-resource

  2. 引入插件

    // main.js

// 引入插件vue-resource
// vue-resource使用的是默认暴露
import vueResource from 'vue-resource'

  3. 使用插件

    // 使用插件
// vm和所有的vc身上都会多了一个$http
Vue.use(vueResource)

  4. 发送请求

    this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
response=>{
	console.log(response.data.items)
	this.$bus.$emit('get',{users: response.data.items, isLoading: false})
},
error=>{
	console.log('请求失败了',error.message)
	this.$bus.$emit('get',{users: [], errorMsg: error.message,isLoading: false})
})

    注：vue-resource的用法、API等与axios都是相同的

posted @ 2024-02-29 19:53  刘二水  阅读(154)  评论(0)    收藏  举报