Vue推荐使用axios 发送网络请求:最近重新开始做Vue项目,重新回归一下。从axios的几个方法开始吧。

1. 安装: 既然是Vue项目,我还是选择常用的npm的方式

$ npm install axios  (-d)

  2. 引入: const axios =  require('axios')  或者babel转化用ESmodule的方式  const axios = import('axios')

  3.请求: GET 请求,请求方式都非常灵活:

    axios.get('/user?ID=12345')   ----------------------   URL携带参数的方式

    axios.get('/user',{ params:{ ID:12345 } })  -------   参数对象的方式

    注意:返回的都是promise ------  下面是两个处理返回的方式

    a.  Promise.then().catch的形式 :

      axios.get('/user',{param:{ID:12345}}).then(response => {console.log(response)})

    b. async function getUser() {

      try {

        const response = await axios.get('/user',{ param:{ ID:12345} })

      } catch (e) {

        console.log(e)

      }

     }    

    Post请求:按照参数对象方式传递即可

      axios.post('/user',{ name:"张三",age:"18"  })  注意:  这里是没有param 的,直接对象方式传递就可以了。

  4. 并发 请求

    fucntion getUser(){

     axios.get('/user/1234')

}

    fucntion getPermission (){

     axios.get('/user/1234/permissions')

}

   axios.all([getUser,getPermission ]).then(axios.spread(function(acct,perms) {    ----.then方法中,调用axios.spread方法,参数为函数,该函数接受两个参数acct pe

      // 这两个参数,分别表示两个请求的返回。

    }))                      ------- 即Promise数组形式   catch函数捕获错误来源,待研究 ---

  5. 设置基本配置    包括baseUrl   和头部等   常用baseUrl    axios.creat( {config对象} )

    axios.creat({

      baseURL:'http://some-domain.com/api/',    // 基础url    通过webpack配置运行环境的判断,可以更改线上地址,开发地址前缀

      timeout:1000,             // 响应超时时间

      headers:{Content-Type:application/x-www-form-urlencoded }  // 请求头

    })

axios 常用的几个方法的更多相关文章

  1. VUE-005-axios常用请求参数设置方法

    在前后端分离的开发过程中,经常使用 axios 进行后端接口的访问. 个人习惯常用的请求参数设置方法如下所示: // POST方法:data在请求体中 addRow(data) { return th ...

  2. axios常用操作

    axios常用操作 一:函数化编程 1:编写可复用的方法 axios(config)的方法中,有必须的url参数和非必须的options参数.所以我们可以先写一个接受这两个参数的方法,在这个方法中我们 ...

  3. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  4. LaTeX常用数学符号表示方法

    转自:http://www.mohu.org/info/symbols/symbols.htm 常用数学符号的 LaTeX 表示方法 (以下内容主要摘自“一份不太简短的 LATEX2e 介绍”) 1. ...

  5. python常用数据类型内置方法介绍

    熟练掌握python常用数据类型内置方法是每个初学者必须具备的内功. 下面介绍了python常用的集中数据类型及其方法,点开源代码,其中对主要方法都进行了中文注释. 一.整型 a = 100 a.xx ...

  6. 操作sqlserver数据库常用的三个方法

    1. ADO.NET -> 连接字符串,常用的两种方式: server=计算机名或ip\实例名;database=数据库名;uid=sa;pwd=密码; server=计算机名或ip\实例名;d ...

  7. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  8. jQuery显示和隐藏 常用的状态判断方法

    显示:show()  display:block; 隐藏:hide()   display:none; 当显示和隐藏切换的时候,需要判断此刻是显示还是隐藏,那判断条件常用以下几种方法: 1.if(th ...

  9. python基础:os模块中关于文件/目录常用的函数使用方法

    Python是跨平台的语言,也即是说同样的源代码在不同的操作系统不需要修改就可以同样实现 因此Python的作者就倒腾了OS模块这么一个玩意儿出来,有了OS模块,我们不需要关心什么操作系统下使用什么模 ...

随机推荐

  1. 怎么理解Python迭代器与生成器?

    怎么理解Python迭代器与生成器?在Python中,使用for ... in ... 可以对list.tuple.set和dict数据类型进行迭代,可以把所有数据都过滤出来.如下:         ...

  2. .net core https 双向验证

    文章来自:https://www.cnblogs.com/axzxs2001/p/10070562.html 关于https双向认证的知识可先行google,这时矸接代码. 为了双向认证,我们首先得准 ...

  3. vue+springboot文件上传

    //vue element-ui组件 <el-upload style="position: relative;top: -40px;left: 240px;"        ...

  4. 大数据框架Hive优化方法

    常规调优手段 Fetch抓取 某些情况查询不必用MapReduce计算,比如select*,可以直接读取文件 本地模式 有时数据量比较小,hive可以通过本地模式在单台机器上处理所有任务,对于小数据集 ...

  5. 洛谷 P2403 [SDOI2010]所驼门王的宝藏 题解

    题目描述 分析 先放一张图便于理解 这一道题如果暴力建图会被卡成\(n^{2}\) 实际上,在我们暴力建图的时候,有很多边都是重复的 假如一行当中有许多横天门的话,我们就不必要把这一行当中的所有点和每 ...

  6. MongoDB基本使用方法

    mongo与关系型数据库的概念对比,区分大小写,_id为主键. 一.数据库操作 >show dbs或者show databases   #查看所有数据库 >use dbname    #创 ...

  7. Python游戏编程入门 中文pdf扫描版|网盘下载内附地址提取码|

    Python是一种解释型.面向对象.动态数据类型的程序设计语言,在游戏开发领域,Python也得到越来越广泛的应用,并由此受到重视. 本书教授用Python开发精彩游戏所需的[]为重要的该你那.本书不 ...

  8. Python globals和locals函数_reload函数

    Python globals和locals函数_reload函数: globals( ): 返回所有能够访问到的全局名字 num = 5 sum = 0 def add(num): func_sum ...

  9. Django学习路30_view中存在重复名时,取第一个满足条件的

    在 settings 中添加 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.con ...

  10. PHP array_push() 函数

    实例 向数组尾部插入 "blue" 和 "yellow": <?php$a=array("red","green" ...