axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它可以在浏览器和node环境下运行，在github上已经有六七万个星了，axios使用很方便，很多人在使用他,vue官方也推荐使用axios了，技术这东西还是随主流吧，大家都用肯定有它的特长所在。

axios现在最新的版本的是v0.19.0，实现代码也很好理解。我们本节先说一下它的使用方法，然后来分析一下它的实现源码

我们可以使用两种方式来创建一个axios实例:

　　·一种是直接调用axios(config)　

　　·另一种是调用axios.create(config)来自定义配置新建一个axios实例。

、config可以是一个url地址(此时表示发送get请求),也可以是一个对象，对象可以含有如下属性:

  • url            　　　　　　;请求的地址
  • method            　　　　;请求的类型                　　　　;可以是get、post、head、options、delete、put、patch之一
  • data            　　　 　　;发送的数据                　　　　;作为请求主体被发送的数据，只适用于PUT、POST、PATCH之一
  • baseURL               　　;将自动加在url前面
  • params            　　　　;即将与请求一起发送的url参数
  • paramsSerializer    　　;负责params序列化的函数         ;一般可以忽略，axios内部可以自动序列化的
  • timeout            　　　　;超时时间(0表示无超时时间)
  • responseType        　　;服务器响应的数据类型            ;可以是arraybuffer、blob、document、json、text、stream之一
  • onUploadProgress　　  ;上传处理进度事件
  • onDownloadProgress    ;下载处理进度事件

、axios的配置有两种默认配置方式:

  • 全局的axios默认值   　　通过修改axios.default上的属性来设置           　　　　 　;例如:axios.defaults.baseURL = 'https://api.example.com';
  • 自定义实例默认值    　　可以传入一个配置对象，用该对象新建一个axios实例      ;例如:var myaxios = axios.create({baseURL:'/ajax'})

、举个栗子，有个需求是这样的:有一个输入框，对应两个按钮，点击一个按钮则请求数据库使按钮里的值+10，点击另外一个按钮则使按钮里的值减5。

writer by:大沙漠 QQ:22969969

首先我们定义两个php接口文件，分别为add.php和sub.php，add.php如下:

sub.php如下:

他们的路劲分别为http://j.com/ajax/add.php和http://j.com/ajax/sub.php，这是前后端分离典型的一个接口目录,注意add.php的请求方式是get请求，而post.php是post请求，然后我们写前端文件，如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <input type="text" id="i">

    <button id="b1">递增10</button>

    <button id="b2">递增10(自定义配置)</button>

    <button id="b3">递减5</button>

    <script>

        axios.defaults.baseURL = '/ajax/';

        b1.onclick =function(){                                     //全局的axios默认值方法

            axios('/add.php?no='+i.value).then(res=>{

                if(res.data.code==0){

                    i.value = res.data.data.no

                }

            })

        }

        b2.onclick=function(){                                         //自定义的实例默认化

            var myaxios = axios.create({baseURL:'/ajax'})                //自定义配置，和按钮1的实现效果是一样的

            myaxios({

                url:'/add.php',

                params:{no:i.value}

            }).then(res=>{

                if(res.data.code==0){

                    i.value = res.data.data.no

                }

            })

        }

        b3.onclick=function(){                                         //对于post请求来说

            axios({

                method:'post',

                url:'/sub.php',

                data:"no="+i.value

            }).then(res=>{

                if(res.data.code==0){

                    i.value = res.data.data.no

                }

            })

        }

    </script>

</body>

</html>

页面效果如下:

当我们点击递增10时，页面变为了如下:

点击第二个按钮后输入框也是等于10，点击递减5按钮后，输入框如下:

、为了方便起见，所有支持的方法都提供了别名，如下:

axios.get(url,config)            　　;get请求的便捷方法 
    axios.delete(url,config)       　　 ;delete请求的便捷方法
    axios.head(url,config)            　 ;head请求的便捷方法
    axios.post(url,data,config)          ;post请求的便捷方法
    axios.put(url,data,config)            ;put请求的便捷方法
    axios.patch(url,data,config)        ;patch请求的便捷方法

、因此实例的前端代码可以脚本可以修改一下，如下:

    <script>

        axios.defaults.baseURL = '/ajax/';

        b1.onclick =function(){                                     //全局的axios默认值方法

            axios.get('/add.php?no='+i.value).then(res=>{

                if(res.data.code==0){

                    i.value = res.data.data.no

                }

            })

        }

        b2.onclick=function(){                                         //自定义的实例默认化

            var myaxios = axios.create({baseURL:'/ajax'})

            myaxios.get('/add.php?no='+i.value).then(res=>{

                if(res.data.code==0){

                    i.value = res.data.data.no

                }

            })

        }

        b3.onclick=function(){                                         //对于post请求来说

            axios.post('/sub.php',{method:'post',data:"no="+i.value}).then(res=>{

                if(res.data.code==0){

                    i.value = res.data.data.no

                }

            })

        }

    </script>

渲染结果是一样的，挺简单的吧。

axios请求后返回的是一个promise对象，如果成功了返回的response对象含有六个属性，如下:

　　data        　　;由服务器提供的响应数据
　　status       　  ;来自服务器响应的 HTTP 状态码   
　　statusText      ;来自服务器响应的 HTTP 状态信息  
　　headers         ;服务器响应的头,是个对象        ;包含content-type、date、connection、conetent-length、server等响应头
　　config             ;本次ajax请求的配置信息，是个对象
　　request          ;本次请求对应的XMLHttpRequest对象

例如:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <input type="text" id="i">

    <button id="b">测试1</button>

    <script>

        b.onclick=function(){

            axios('/ajax/add.php/no='+i.value).then(res=>{

                console.log(res.data)

                console.log(res.status)

                console.log(res.statusText)

                console.log(res.headers)

                console.log(res.config)

                console.log(res.request    )

            })

        }

    </script>

</body>

</html>

渲染如下:

我们点击按钮后输出如下:

把promise()对象的信息给打印出来了，一般我们会在响应拦截器里对这些返回值一层判断，响应器再后面介绍。

axios 源码分析(上) 使用方法的更多相关文章

  1. vuex 源码分析(一) 使用方法和代码结构

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,注意:使用前需要先加载vue文件才可以使用(在node.js下需要使用Vue.use(Vuex ...

  2. SpringBoot事件监听机制源码分析(上) SpringBoot源码(九)

    SpringBoot中文注释项目Github地址: https://github.com/yuanmabiji/spring-boot-2.1.0.RELEASE 本篇接 SpringApplicat ...

  3. Axios源码分析

    Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中. 文档地址:https://github.com/axios/axios axios理解和使用 1.请求配置 { // ...

  4. html2canvas实现浏览器截图的原理（包含源码分析的通用方法）

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...

  5. 知识小罐头08（tomcat8启动源码分析 上）

    前面好几篇都说的是一个请求是怎么到servlet中的service方法的,这一篇我们来看看Tomcat8是怎么启动并且初始化其中的组件的? 相信看了前面几篇的小伙伴应该对Tomcat中的各个组件不陌生 ...

  6. external-attacher源码分析(1)-main方法与启动参数分析

    更多 ceph-csi 其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 摘要 ceph-csi分析-external-attacher源码分析.external- ...

  7. 知识小罐头05（tomcat8请求源码分析 上）

    这一篇我们不看源码,就大概理一下Tomcat内部组成部分!前面花费了两篇博客的篇幅来说说了一般的maven web项目并部署到tomcat运行,其实都是为这篇做铺垫的! 其实我下载了tomcat7,t ...

  8. axios源码入口以及公用方法

    axios学习笔记(公用方法) 源码地址 找到入口文件 axios/lib/axios.js var utils = require('./utils'); var bind = require('. ...

  9. SpringCloud Gateway微服务网关实战与源码分析-上

    概述 定义 Spring Cloud Gateway 官网地址 https://spring.io/projects/spring-cloud-gateway/ 最新版本3.1.3 Spring Cl ...

随机推荐

  1. Java设计模式：Flyweight(享元)模式

    概念定义 享元(Flyweight)模式运用共享技术高效地支持大量细粒度对象的复用. 当系统中存在大量相似或相同的对象时,有可能会造成内存溢出等问题.享元模式尝试重用现有的同类对象,如果未找到匹配的对 ...

  2. 同步IDEA系列软件的设置,再也不用但心我的配置丢失了

    同步IDEA系列软件的设置 问题描述:重装idea,之前配置好的快捷键就没有了.之前一直是每隔几个月要把配置导出一下,上传百度云盘.现在好了,通过配置可以自动同步配置了.我再也不用但心配置丢失了. 快 ...

  3. Web前端基础(1):HTML(一)

    1. HTML概述 1.1 什么是HTML HTML称为超文本标记语言,是一种标识性的语言.它包括一系列标签．通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体.H ...

  4. Nginx反向代理实现负载均衡以及session共享

    随着社会的发展和科技水平的不断提高,互联网在人们日常生活中扮演着越来越重要的角色,同时网络安全,网络可靠性等问题日益突出.传统的单体服务架构已不能满足现代用户需求.随之而来的就是各种分布式/集群式的服 ...

  5. vue学习笔记（三）： 启动说明

    1.启动页面:index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. 禁止ViewPager滑动

    实现如下: public class NoScrollViewPager extends ViewPager { public NoScrollViewPager (Context context) ...

  7. 关于MySQL的一些骚操作——提升正确性，抠点性能

    概要 回顾以前写的项目,发现在规范的时候,还是可以做点骚操作的. 假使以后还有新的项目用到了MySQL,那么肯定是要实践一番的. 为了准备,创建测试数据表(建表语句中默认使用utf8mb4以及utf8 ...

  8. SparkStreaming和storm的区别

    这是2种不同的架构. 他们的区别是SparkStreaming的吞吐量非常高,秒级准实时处理,Storm是容错性非常高,毫秒级实时处理 解释:sparkStreaming是一次处理某个间隔的数据,比如 ...

  9. CodeForces - 1255D （模拟+构造+贪心）

    题意 https://vjudge.net/problem/CodeForces-1255D rxc的农场里'R'表示有米,现在有K只鸡,给这k只鸡选一些格子,每个鸡可以有多个格子(每个鸡至少吃一个米 ...

  10. Python字符串内置方法使用及年龄游戏深入探究

    目录 作业 ==程序代码自上往下运行,建议自上而下的完成下列任务== 作业 使用代码实现以下业务逻辑: 写代码,有如下变量name = " aleX",请按照要求实现每个功能: 移 ...