axios 的非常好的请求数据方式,利用了 promise 的方式来进行的操作

  首先 promise 是非常好的处理 异步请求的方式,且拥有高并发请求的能力

  并发请求:出现大量的异步请求后,一起处理

  axios 的基本用法

  下载:npm i axios -S

  引入:import axios from "axios"

  第一种方式:

  get 的请求方式:

    axios.get('地址',params:{id:1}).then(function(result){  // params:{} 里面存放向后台发送的数据

      console.log(result)    // 成功的回调函数

    }).catch(function(error){

      console.log(error)    // 失败的回调函数

    })

  post 的请求方式

    axios.post('地址',{id:1}).then(function(result){  // {id:1} 就是要发送的数据,与 get 的方式有些差别, 且发送过去的数据到后台 是 json 的格式,并不是传统的表单格式  

      console.log(result)    // 成功的回调函数

    }).catch(function(error){

      console.log(error)    // 失败的回调函数

    })

  axios 是用 promise 封装的一个 ajax

  第二种方式:

  get 方式

  axios({

    method:"get",  // 请求的方式

    url:"地址",    // url 地址

    params:{id:1}  // 仅限 get 方式像后台传输的数据

  }).then(function(result){

    console.log(result)  // 请求成功的函数

  }).catch(function(error){

    console.log(error)  // 请求失败的函数  

  })

  post 方式

  axios({

    method:"post",

    url:"地址",

    data:{},  // 传递的数据,在这里我们注意以下,我们传递的数据是 json 格式,传统的 ajax 传递的数据是 字符串的格式,user=blue&age=20,所以冲突

    data:Qs.stringify({})  // 像这种写法,我们将会以传统的表单形式向后台发送数据, 下面会讲解 qs  ,两种 data 二选一

  }).then(res=>{

    console.log(res)  

  })

  解决方法,我们需要在 引入 qs 的插件,利用 npm 下载的 axios 里面自带了 qs 的插件无需下载;

  使用方法:

    import Qs from "qs";

    在 data 中使用 Qs.stringify()  // 这个里面传入数据即可成为 字符串格式,不这样写便是 json 格式

  第三种方式(第一种与第二种的结合版):创建实例的方式,也是用的最多的方式,可以用来处理很多的请求数据的操作,且是按顺序请求的

  var instance = axios.create({  // 创建一个实例

    baseURL:"",  // 代表一个公共的地址,主要是 http 域名 端口,一致的东西,可以放在这里

    timeout:1000  // 超过时间中断

  });

  axios.all([

    instance({  // 第一个实例

      url:"",  // 代表公共地址后面的地址

      method:""  // 代表请求的方式

    }),

    instance({  // 第二个实例

      url:"",  // 代表公共地址后面的地址

      method:""  // 代表请求的方式

    })

  ]).then(axios.spread(function(res1,res2){  // axios.spread() 相当于结构赋值,让 res1 代表了 第一个实例获取的数据,res2 代表了第二个获取实例的数据

    console.log(res1)  // 这个代表第一个实例获取的数据

    console.log(res2)  // 这个代表第二个实例获取的数据

  }))

  案例:

  

axios 的用法解析的更多相关文章

  1. extern "c"用法解析

    转自: extern "c"用法解析 - 简书 引言 C++保留了一部分过程式语言的特点,因而它可以定义不属于任何类的全局变量和函数.但是,C++毕竟是一种面向对象的程序设计语言, ...

  2. WordPress的have_posts()和the_post()用法解析

    原文地址:http://www.phpvar.com/archives/2316.html 网上找到一篇介绍WordPress的have_posts()和the_post()用法解析的文章,觉得不错! ...

  3. extern "C" 用法解析

    extern "c"用法解析 作者 作者Jason Ding ,链接http://www.jianshu.com/p/5d2eeeb93590 引言 C++保留了一部分过程式语言的 ...

  4. mysql group by 用法解析(详细)

    在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供 有distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是用它来返回不重记录的 ...

  5. (转载)mysql group by 用法解析(详细)

    (转载)http://blog.tianya.cn/blogger/post_read.asp?BlogID=4221189&PostID=47881614 mysql distinct 去重 ...

  6. group by 用法解析

    group by 用法解析 group by语法可以根据给定数据列的每个成员对查询结果进行分组统计,最终得到一个分组汇总表. SELECT子句中的列名必须为分组列或列函数.列函数对于GROUP BY子 ...

  7. sql中的group by 和 having 用法解析

    转载博客:http://www.cnblogs.com/wang-123/archive/2012/01/05/2312676.html --sql中的group by 用法解析:-- Group B ...

  8. C/C++之extern "C"的用法解析

    extern "C"的用法解析 http://blog.sina.com.cn/u/494a1ebc010004g5 C++中extern “C”含义深层探索 1.引言 C++语言 ...

  9. ZT extern "C"的用法解析

    extern "C"的用法解析 1.引言 C++语言的创建初衷是“a better C”,但是这并不意味着C++中类似C语言的全局变量和函数所采用的编译和连接方式与C语言完全相同. ...

随机推荐

  1. API接口之安全篇

    APP.前后端分离项目都采用API接口形式与服务器进行数据通信,传输的数据被偷窥.被抓包.被伪造时有发生,那么如何设计一套比较安全的API接口方案呢? 一般的解决方案如下: 1.Token授权认证,防 ...

  2. JS代码格式化

    JS代码格式化也就是规范化,保留必要的换行和缩进使代码阅读起来更容易.团队协同工作时会有相应的标准,大家要保证统一的代码风格,这样在合并代码的时候才不容易出问题.通过快捷键Ctrl+Shift+F进行 ...

  3. vue路由(基于VScode开发)

    index.js如果在router目录下,代表这个js文件只是路由使用 main.js中为全局,需要引入使用到的组件,一般vue中不用写东西vue中el挂载哪个就哪个组件为根目录,传值数据绑定的时候在 ...

  4. react如何通过shouldComponentUpdate来减少重复渲染

    转自:https://segmentfault.com/a/1190000016494335 在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件 ...

  5. Markdown,让你的代码高亮起来

    当你的审美提高或者习惯了Linux下的黑色代码高亮,已经不满足与博客园原有的代码高亮,那么这篇博客就是你的选择. 代码块高亮 代码块Highlight /* 使用了Monokai Sublime的黑色 ...

  6. (转)Linux传输大文件(分割传输)

    1.分拆为多个文件的命令: cat workspace_2018.tar.gz | split -b 1G - workspace_2018.tar.gz. 命令解释: workspace_2018. ...

  7. C++中的变量属性小结

    其实在C++中,一个变量除了数据类型以外,还有3种属性: (1)存储类别:C++中允许使用auto,static,register,extern 4种存储类别. (2)作用域:指在程序中可以使用该变量 ...

  8. Java 实现C#中的String.format效果 解决("我是{0},今年了","whaozl") bug

        /**      * 需要引入com.alibaba.fastjson.1.2.8      * 两种调用方式      * String template1="我是{0},今年{1 ...

  9. Redis持久化(转载)

    原文地址:http://www.jianshu.com/p/2f14bc570563?from=jiantop.com 数据持久化 Redis提供了将数据定期自动持久化至硬盘的能力,包括RDB和AOF ...

  10. 微信小游戏egret开发包括p2引擎小结

    用egret + p2 做一个类似投球的小游戏,坑大致如下: 1.p2引擎与egret坐标不同注意转换,横坐标没什么,纵坐标egret.y = stageHeight - body.position[ ...