跳至主要內容

Vue与Ajax

Guitar大约 3 分钟

Ajax 回顾

发送Ajax请求

发送 AJAX 异步请求的常见方式包括：

  1. 原生方式，使用浏览器内置的 JS 对象 XMLHttpRequest

    const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){}
xhr.open()
xhr.send()

  2. 原生方式，使用浏览器内置的 JS 函数 fetch

    fetch('url', {method : 'GET'}).then().then()

  3. 第三方库方式，使用 jQuery（对 XMLHttpRequest 进行的封装）

    $.get()
$.post()

  4. 第三方库方式，使用axios （对 XMLHttpRequest 进行的封装，基于Promise）

    axios.get().then()
    • axios 是 Vue 官方推荐使用的。

Ajax跨域

在 a 页面中想获取 b 页面中的资源，如果 a 页面和 b 页面所处的协议、域名、端口不同（只要有一个不 同），所进行的访问行动都是跨域的。

允许的跨域行为；

  1. 直接在浏览器地址栏上输入地址进行访问
  2. 超链接
  3. <img src="其它网站的图片是允许的">
  4. <link href="其它网站的 css 文件是允许的">
  5. <script src="其它网站的 js 文件是允许的">

不允许的跨域行为：

  1. Ajax跨域请求（被同源策略拦截）
  2. Cookie、localStorage、IndexedDB 等存储性内容是不允许跨域的
  3. DOM节点不允许跨域

解决Ajax跨域；

  1. CORS

  2. jsonp

  3. 代理服务器方案

    1. Nginx反向代理
    2. Node中间件代理

    原理：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略的。

    image-20230707092408236
    image-20230707092408236

  4. postMesssage

  5. websocket

  6. window.name + iframe

  7. location.hash + iframe

  8. document.domain + iframe

  9. ......

Vue脚手架的代理

Vue脚手架提供了一个内置的代理服务器，可以提供这个代理解决跨域问题，也是代理服务器方案的一种。

Vue代理需要在 vue.config.js 文件中进行配置。当请求在本机上没有时，会通过代理服务器访问，如果代理服务器也没有，则404。

  1. 简单开启：仅配置代理服务器。

    devServer: {
    proxy: 'http://localhost:8000' // 找不当资源时，默认代理访问 8000 服务器获取资源，如仍无，则404
}

    走代理时，会直接将请求路径uri（/ 开头）拼接在代理服务器地址末尾。

    即：http://localhost:8000+uri。

  2. 高级开启：支持配置多个代理，通过uri匹配代理，并支持修改代理请求的路径。（建议）

    devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:8000',
            pathRewrite:{'^/api', ''}, // 请求路径更改规则
            ws: true, // 支持 websocket（一种实时传输技术）
            changeOrigin: true // 表示改变起源（让目标服务器不知道真正的起源）
        }
        '/abc': {
            target: 'http://localhost:9000',
            pathRewrite:{'^/abc', ''},
            ws: true, // 默认值 true
            changeOrigin: true // 默认值 true
        }
        ...
    }
}

    请求本地服务器 --> 无 --> 请求代理服务器 --> 根据 uri 开头匹配代理服务器 --> 根据 pathRewrite 进行uri重写 --> 拼接代理url：代理服务器+代理uri --> 发起代理请求 --> 返回响应内容

    如：

    axios.get('/api/vue/bugs').then(
    response => {
        console.log('服务器响应回来的数据：', response.data)
    },
    error => {
        console.log('错误信息：', error.message)
    }
)
// 请求代理服务器时，匹配 /api 开头的代理服务器，重写uri后，代理url为：http://localhost:8000/vue/bugs

使用 vue-resource 插件发送Ajax请求

Vue官方推荐使用 axios 发起Ajax请求，也可以使用 vue-resource 插件完成。

使用步骤：

  1. 安装：npm i vue-resource。

  2. 导入并使用插件

    import vueResource from 'vue-resource'
Vue.use(vueResource)

// 使用插件后，所有的vm、vc都有添加了 $http 属性，用以发起Ajax请求

  3. 发起AJax请求

    this.$http.get("").then()
// 用法同 axios，只不过把 axios 替换成 this.$http
Copyright ©2024-present Guitar