关于axios,其实原本在做开发的几年里并不知道,一直使用的也都是jquery的ajax。后来因为一个同事的述说,我才知道有这么个库,基于promise的http库。

看来,以前的我确实比较井底之蛙了。以为前端就是这么点东西。

已至于react、vue、angular也是因为后来项目准备使用react开发的时候才知道的。

一直只用es5,异步只用ajax,导致es6也没有花太多时间去学习。后来才知道es6中的一种异步是promise。

这次我们就来说一下axios:

axios是支持浏览器和node 2种运行平台的,基于promise,可以自动识别json,可防止跨站请求伪造CSRF。

浏览器中使用axios:

我们来看个请求:

其实也和jquery的ajax请求差不多。

axios的get请求方式1:

axios的get请求方式2:

两种请求就是参数的传递方式不同。一个直接拼接url,一个传个对象

这里的then是promise的,用于表示请求成功后的回调处理,后面的catch表示请求失败后的回调处理

请求方式:

请求和响应结果相同:返回很多信息。有用的一般有data、status、statusText,其他的看情况使用,比如请求头。

axios的post请求方式:

其实就是换下名字

请求方式:

响应结果就是post的响应结果了。

另外一种写法其实也可以:

效果和上面是一样一样的。

node中使用axios:

举个栗子:

该功能可将网络上图片下载保存在本地中。fs模块是node的io操作模块。

前端异步的一种方法库:axios的更多相关文章

  1. js处理异步的几种方式

    Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推) ...

  2. 原生javascript实现异步的7种方式

    1.$(document).ready 点评: 需要引用jquery :兼容所有浏览器. 2.标签的async=”async”属性 async的定义和用法(是HTML5的属性) async 属性规定一 ...

  3. Android实现异步的几种方法

    在Android项目中,有经验的开发人员都知道,一些耗时的IO操作等都必须在子线程中去操作,那么可以有哪些方法来开启子线程呢,一般可以使用Java中自带的几种方法,也可以使用Andorid特有的一些类 ...

  4. 【Web前端Talk】“用数据说话,从埋点开始”-带你理解前端的三种埋点

    埋点到底是什么呢? 引用自百科的原话是,埋点分析网站分析的一种常用的数据采集方法.因此其本质是分析,但是靠什么分析呢?靠埋点得到的数据.通俗来讲,就是当我想要在某个产品上得到用户的一些行为数据用来分析 ...

  5. JS实现异步的几种方式

    1.JS执行环境:单线程   单线程:就是指一次只能完成一件任务.若有多个任务时,就必须排队,等前面一个任务完成之后,再执行后面一个任务 缺点:任务耗时很长,后面的任务需要等待,拖延整个程序的执行.例 ...

  6. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  7. 前端路由两种模式:hash、history

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  8. spring boot获取前端参数四种方法

    一:直接参数绑定 @RequestMapping("/hello") @ResponseBody public String hello(String para) { // par ...

  9. c#Task类。实现异步的一种方式

    Task和Task<TResult>是c#提供的一种实现异步功能的2个类.Task<TResult>继承Task类,有返回参数. 1.基本用法 不嵌套利用静态方法创建和运行任务 ...

随机推荐

  1. 实例讲解TP5中关联模型

    https://blog.csdn.net/github_37512301/article/details/75675054 一.关联模型在关系型数据库中,表之间有一对一.一对多.多对多的关系.在 T ...

  2. field-symbols: <ATTR> type ANY.

    field-symbols: type ANY. * importing iv_root_list type refer to if_genil_cont_root_objectlist DATA l ...

  3. express使用

    1.安装express命令 cnpm install express --save 2.使用方法 var express = require('express'); var app = express ...

  4. poj3259: Wormholes(BF模板题)

    http://poj.org/problem?id=3259 Description While exploring his many farms, Farmer John has discovere ...

  5. [Java in NetBeans] Lesson 05. Method/function

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: Define a method:(motivation: write one time, but use it many times ...

  6. Linux性能优化gprof使用

    gprof用于分析函数调用耗时,可用之抓出最耗时的函数,以便优化程序. gcc链接时也一定要加-pg参数,以使程序运行结束后生成gmon.out文件,供gprof分析. gprof默认不支持多线程程序 ...

  7. 4.C#虚方法virtual详解

    C#虚方法virtual详解 在C++.Java等众多OOP语言里都可以看到virtual的身影,而C#作为一个完全面向对象的语言当然也不例外. 虚拟函数从C#的程序编译的角度来看,它和其它一般的函数 ...

  8. 从零开始一起学习SLAM | 相机成像模型

    上一篇文章<从零开始一起学习SLAM | 为啥需要李群与李代数?>以小白和师兄的对话展开,受到了很多读者的好评.本文继续采用对话的方式来学习一下相机成像模型,这个是SLAM中极其重要的内容 ...

  9. 从零开始一起学习SLAM | 为啥需要李群与李代数?

    很多刚刚接触SLAM的小伙伴在看到李群和李代数这部分的时候,都有点蒙蒙哒,感觉突然到了另外一个世界,很多都不自觉的跳过了,但是这里必须强调一点,这部分在后续SLAM的学习中其实是非常重要的基础,不信你 ...

  10. cocos2d JS 设置字幕循环滚动(背景图滚动亦可)

    var dong = ccs.load("res/Login.json"); this.addChild(dong.node); this.cShamNotice = ccui.h ...