专栏首页Kirin博客【vue学习】axios

【vue学习】axios

原生ajax

    //创建异步对象  
    var xhr = new XMLHttpRequest();
    //设置请求基本信息,并加上请求头
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.open('post', 'test.php' );
    //发送请求
    xhr.send('name=Lan&age=18');
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      } 
    };

jqueryAjax

var loginBtn =  document.getElementsByTagName("button")[0];
loginBtn.onclick = function(){
    ajax({
        type:"post",
        url:"test.php",
        data:"name=lan&pwd=123456",
        success:function(data){
           console.log(data);
        }
    });
}

fetch

fetch('http://www.mozotech.cn/bangbang/index/user/login', {
    method: 'post',
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams([
        ["username", "Lan"],["password", "123456"]
    ]).toString()
})
.then(res => {
    console.log(res);
    return res.text();
})
.then(data => {
    console.log(data);
})

axios

axios({
    method: 'post',
    url: '/abc/login',
    data: {
        userName: 'Lan',
        password: '123'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

同时发起多个请求:

对比

  1. 几种方式的对比 ajax: 【优点:局部更新;原生支持】 【缺点:可能破坏浏览器后退功能;嵌套回调】 jqueryAjax: 【在原生的ajax的基础上进行了封装;支持jsonp】 fetch: 【优点:解决回调地狱】 【缺点:API 偏底层,需要封装;默认不带Cookie,需要手动添加; 浏览器支持情况不是很友好,需要第三方的ployfill】 axios: 【几乎完美】
  2. axios的特点 支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动转换JSON数据 浏览器端支持防止CSRF(跨站请求伪造)

axios提问

  1. 如何将axios异步请求同步化处理?
//使用 asyns/await 
async getHistoryData (data) {
 try {
   let res = await axios.get('/api/survey/list/', {
     params: data
   })
   this.tableData = res.data.result
   this.totalData = res.data.count
 } catch (err) {
   console.log(err)
   alert('请求出错!')
 }
}
  1. 为何官方推荐使用axios而不用vue-resource? 在Vue1.x中,官方推荐使用的ajax库是vue-resource。到了Vue2.x,官方(尤大)推荐的ajax库改为了Axios,按照说法是因为已有一个更完备的轮子,就不需要造一个新的。
  2. 你了解axios的原理吗?有看过它的源码吗? Axios源码深度剖析
  3. 你有封装过axios吗?主要是封装哪方面的? 具体config配置参考 到具体页面中的应用:
  4. 如何中断(取消)axios的请求?
  5. axios怎么解决跨域的问题?
    • 如果 server 端是自己开发的,那么修改相关代码支持跨域即可。如果不是自己开发的,那么可以自己写个后端转发该请求,用代理的方式实现。
    • 跨域这个行为是浏览器禁止(浏览器不允许当前页面的所在的源去请求另一个源的数据)的,但是服务端并不禁止
    • 源指协议、端口、域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子: 协议跨域: http://a.baidu.com访问https://a.baidu.com; 端口跨域: http://a.baidu.com:8080访问http://a.baidu.com:80; 域名跨域: http://a.baidu.com访问http://b.baidu.com;
    • 关键字:Access-control-Allow-origin、跨域
    • 几种解决跨域的方法
    • A) 开发模式下,可以在config中配置proxyTable即可
    • B) 服务端基于spring实现
    • C) CORS:①即跨源资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 ②它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。③但是CORS也具有一定的风险性,比如请求中只能说明来自于一个特定的域但不能验证是否可信,而且也容易被第三方入侵。 ④这里一般需要后端配合,开启cors。一般各种语言都有类似的包。比如NodeJS的koa2-cors
    • D) Nginx代理proxy
    • E) express代理
    • 请求头自动携带cookie时:config中配置withCredentials:true,否则为false【看到有人说:withCredentialstrue的情况下,后端要设置Access-Control-Allow-Origin为你的源地址,例如http://localhost:8080,不能是*,而且还要设置header('Access-Control-Allow-Credentials: true')
    • config中配置qs:避开ajax信使请求,并兼容Android

    import Qs from 'qs'

文章出自https://www.jianshu.com/p/d771bbc61dab

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 学习 scrapy 爬虫框架

    kirin
  • vue vuecli3 前端解决跨域问题

    指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

    kirin
  • python–多线程threading

    线程在执行过程中是共享内存的,它自身只需占用系统必不可少的内存即可,所以线程的并发

    kirin
  • Axon VR获VR触觉相关专利,可模拟触摸皮肤的感觉

    镁客网
  • 多线程编程学习九(并发工具类).

    JMCui
  • AJAX 原理与 CORS 跨域

    https://segmentfault.com/a/1190000011549088

    黄泽杰
  • jQuery的ajax详解

    jQuery内部也封装了对原生ajax请求的方法,可以很方便我们的对后台异步请求处理。

    老马
  • 工作线程数究竟要设置为多少 | 架构师之路

    一、需求缘起 Web-Server通常有个配置,最大工作线程数,后端服务一般也有个配置,工作线程池的线程数量,这个线程数的配置不同的业务架构师有不同的经验值,...

    架构师之路
  • 机器学习与软件开发生命周期

    新的软件开发生命周期(SDLC)意味着要找到适应您的机器学习工作流程的方法。由于数据科学家目前将大量时间都花在基础设施和流程上,而不是在构建模型上,因此寻找软件...

    AiTechYun
  • ThreadLocal的使用场景

    最近项目中遇到如下的场景:在执行数据迁移时,需要按照用户粒度加锁,因此考虑使用排他锁,迁移工具和业务服务属于两个服务,因此需要使用分布式锁。

    阿杜

扫码关注云+社区

领取腾讯云代金券