zoukankan      html  css  js  c++  java
  • ajax(下)和“承诺”

     
    ajax跨域
     
    由于浏览器的同源策略,禁止ajax从一个域名请求另外一个域名上的数据。
    浏览器的同源策略,是对JavaScript实施的安全限制。
     
    所谓的同源是指,域名、协议、端口均为相同。
     
    URL构成:
    http ---- 超文本传输协议
    image.baidu.com ---- 域名
    80 ---- 端口
    /search/detail ---- 资源目录
    ct=503316480&z=undefined ---- 发送到服务器的数据的查询字段
    #header ---- 锚点
     
    判断如下请求是否为跨域:
    localhost  请求  127.0.0.1 --跨域
     
    几种主流的跨域解决方案:
     
    第一种:通过服务端语言代理请求。如PHP,服务端语言php是没有跨域限制的。
    - 让服务器去别的网站获取内容然后返回页面。
     
    第二种:jsonp跨域
    - jsonp跨域就是利用script标签的跨域能力请求资源
    - 既然叫jsonp,显然目的还是json,而且是跨域获取
    - 利用js创建一个script标签,把json的url赋给script的scr属性,把这个script插入到页面里,让浏览器去跨域获取资源
    - callback是页面存在的回调方法,参数就是想得到的json
    - 回调方法要遵从服务端的约定一般是用 callback 或者 cb
    - 注意:jsonp只针对get请求
     
    第三种:CORS 跨域资源共享
    - CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)
    - 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制
    - 整个CORS通信过程,都是浏览器自动完成,不需要用户参与
    - 对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样
    - 实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨源通信
     
    实现CORS并不难,只需服务端做一些设置即可:如
    <?php
    header("Access-Control-Allow-Origin:*"); // 允许任何来源
    注意:IE10以下不支持CORS
     
    第四种:nginx代理跨域
     
    Promise - “承诺”
     
    Promise 是ES6对异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大。
    Promise,简单说就是一个容器,里面保存着一个尚未完成且预计在未来完成的异步操作。
    Promise是一个构造函数,用来创建一个Promise对象。
     
    Promise对象代表一个异步操作,有三种状态:
    pending(进行中)
    fulfilled(已成功)
    rejected(已失败)
     
    Promise对象的状态改变,只有两种可能:
    从 pending 变为 fulfilled
    从 pending 变为 rejected
     
    一旦状态改变,就不会再变,任何时候都可以得到这个结果。
    有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
     
    var p = new Promise(function(resolve, reject) {
      // do something ...
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });
    Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。
    resolve 和 reject 是两个函数,由 JavaScript 引擎提供,不用自己部署。
     
    resolve 函数的作用是,将Promise对象的状态从“进行中”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。
    reject 函数的作用是,将Promise对象的状态从“进行中”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
     
    p.then(function(value) {
      // success
    }, function(error) {
      // failure  可选
    });
     
    Promise实例的then方法:
    第一个参数是resolved状态的回调函数
    第二个参数(可选)是rejected状态的回调函数
    方法返回的是一个新的Promise实例
     
    Promise实例的catch方法:用于指定发生错误时的回调函数。
     
    Promise.all可以将多个Promise实例包装成一个新的Promise实例。
    1.它接受一个数组作为参数。
    2.数组可以是Promise对象,也可以是其它值,只有Promise会等待状态改变。
    3.当所有的子Promise都完成,该Promise完成,返回值是全部值的数组。
    4.如果有任何一个失败,该Promise失败,返回值是第一个失败的子Promise的结果。
    Promise.all([p1,p2,p3])
     
    1.Promise 改造 函数嵌套
     
    2.Promise 改造 ajax嵌套依赖
     
     
    了解 fetch 与  axios
     
    fetch:号称是AJAX的替代品,是基于promise设计的。
    fetch不是ajax的进一步封装,而是原生js,代码结构比起ajax简单多了。
     
    axios:是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
    vue官方推荐的HTTP请求库。
  • 相关阅读:
    ASE19团队项目 beta阶段 model组 scrum report list
    ASE19团队项目 beta阶段 model组 scrum7 记录
    ASE19团队项目 beta阶段 model组 scrum6 记录
    ASE19团队项目 beta阶段 model组 scrum5 记录
    ASE19团队项目 beta阶段 model组 scrum4 记录
    ASE19团队项目 beta阶段 model组 scrum3 记录
    ASE19团队项目 beta阶段 model组 scrum2 记录
    ASE19团队项目 beta阶段 model组 scrum1 记录
    【ASE模型组】Hint::neural 模型与case study
    【ASE高级软件工程】第二次结对作业
  • 原文地址:https://www.cnblogs.com/r-mp/p/11095199.html
Copyright © 2011-2022 走看看