三十六、Vue中的Ajax

郁子大约 3 分钟约 794 字笔记Vue2尚硅谷张天禹Ajax

（一）发送 Ajax 请求

1.请求方式

1）XHR

  • JS 内置，可以直接创建 XMLHttpRequest 实例对象
new XMLHttpRequest();
xhr.open();
xhr.send();

2）JQuery

  • 核心是 DOM 操作，不适用于 Vue 项目
$.get();
$.post();

3）Axios

  • 体积小，约为 JQuery 的 1/4
  • Promise 风格，支持响应拦截器、请求拦截器
  • Vue 官方推荐

4）Fetch

  • 也是 JS 内置，可以直接使用 fetch() 方法
  • 也是 Promise 风格
  • 返回的数据会封装在两层 Promise 里（需要.then 两次），且有兼容性问题（IE）

5）vue-resource

  • 了解即可，vue1.0 常用，起初是 vue 团队维护，后期外包出去，是 vue 中的插件库
  • 是对 XHR 的封装

2.解决跨域

1）CORS

  • 最标准的解决方式，后端操作
  • 在服务器中返回响应时加几个响应头
response.setHeader("Access-Control-Allow-Origin", "*");

2）JSONP

  • 借助 script 标签的 src 属性 在引入外部资源时不受同源策略限制 的特性实现【面试常问】
  • 开发极其少用，需要前后端一起配置，且只能解决 GET 请求跨域问题

3）配置代理服务器

  • 开发常用
  • 代理服务器与本地域名、端口保持一致(localhost:8080)
    • 前端(localhost:8080)向代理服务器请求数据
    • 后端(localhost:5000)把数据交给代理服务器
  • 前端请求时不违反同源策略则没有跨域问题
    • 代理服务器与后端服务器请求时不用 ajax（ajax 是前端技术），所以不存在跨域问题
    • 服务器之间通信用 HTTP 请求
  • 开启方式：
    • Nginx：较复杂，需后端基础
    • Vue-CLI：借助脚手架

相关信息

如果前端请求的资源代理服务器本身就有，那就不会再去请求后端服务器

所以前端请求路径要精确到文件扩展名，如：http://192.168.3.98:8080/students

（二）Vue 脚手架配置代理

1.方法一

1）使用

  • 在 vue.config.js 中添加如下配置：
devServer: {
  proxy: "http://192.168.3.98:5000";
}

2）说明

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

2.方法二

1）使用

  • 编写 vue.config.js 配置具体代理规则：
/**
 * changeOrigin设置为true时，服务器收到的请求头中的Host为：localhost:5000
 * changeOrigin设置为false时，服务器收到的请求头中的Host为：localhost:8080
 * changeOrigin默认值为true
 */
devServer: {
  proxy: {
    '/api1': { //匹配所有以'/api1'开头的请求路径
      target: "http://192.168.3.98:5000", //代理目标的基础路径
      changeOrigin: true,
      pathRewrite: {'^/api1': ''},
    },
    '/api2': { //匹配所有以'/api2'开头的请求路径
      target: "http://192.168.3.98:5001", //代理目标的基础路径
      changeOrigin: true,
      pathRewrite: {'^/api2': ''},
    },
  }
}

2）说明

  • 优点：可以配置多个代理，且可以灵活地控制请求是否走代理
  • 缺点：配置略微繁琐，请求资源时必须加前缀
上次编辑于: