axios

axios是配合vue发送请求的一个库,区别于ajax在于ajax的使用大多需要依赖jquery库,而axios则是自己封装了自己的库。

1、axios的基本使用:

1、axios({url:"",params:{},method:).then().catch()

2、axios.get({url:'',params}).then().catch()

get传输可以直接写在请求头,以?,& 连接,也可以写在params里,对象必须在params里写。后台获取直接取得是对象里的键值对的键。

params:{

    name:value1,

    age:value2

}

3、axios.post({url:"",{name:'zs',age:18}}).then().catch()

表单提交需要添加默认的请求头

4、处理多个并发请求

axios.all([axios({url:"",params:{})]).then(

    axios.spread((res1,res2)=>{

    console.log(res1)

    console.log(res2)

})

).catch()



处理多个并发请求的意义在于,同时发送几条请求,全部请求带数据统一返回,比如页面发送五条数据,要得到更新后的结果,那么得到的就肯定是最后一条请求执行完的结果。

注意:

发送请求的参数会根据不同请求而不同。post请求的参数应该用data来写,而且post提交需要设置请求头为application/x-www-form-urlencoded。

而get请求的参数则是用params来写,否则会造成无法接收。

2、考虑到一个项目可能会请求不同服务器上的数据,此时他的路径是不同的,这时候可以创建多个axios实例,每个实例都有他自己的baseURL,timeout等公有的属性。

创建axios实例,首先需要create一个实例,然后调用实例,如下图:


3、封装axios模块:

为什么要封装axios模块?

一个项目中会有很多组件需要发送请求,这时候每当写一个组件都需要重新引入axios,如果axios这个库不再维护了,那么很多个组件都需要修改,这时候会造成很大的工作量,不易于后期的维护。所以要将axios封装成一个独立的文件,组件发送请求的时候只要调用这个文件即可,即是需要修改,也只是修改这一个文件,不需要大面积的去修改其他文件,可维护性增高。因此封装独立的axios模块是必要的。

如何封装axios模块?

1、首先创建新的文件夹network,文件夹里创建一个request.js,用来写具体的封装的方法

2、引入axios模块,将request方法导出,方便调用

3、封装request方法

3.1、为request传入三个参数,第一个是请求头的信息config,第二个是成功的回调函数,第三个是失败的回调函数。调用的时候,传入相应的对象。

3.2、用promise的方法,使用resolve,reject来处理成功和失败的相应回调。使用时用then,catch来得到返回的数据

3.3、3.2的升级版,因为在axios内部就是promise封装的,所以在用promise的时候可以省去promise的创建,可以直接将实例化对象返回

下面分别对应方法1,2,3


1


2


3


调用

4、拦截器的使用

分为四个,请求成功,请求失败,响应成功,响应失败

instance1.interceptors.request.use().then().catch()

instance1.interceptors.response.use().then().catch()


具体见下图


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容

  • axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在...
    Yanghc阅读 3,644评论 0 7
  • Axios是一个基于Promise的HTTP请求库,可以用在浏览器和Node.js中。平时在Vue项目中,经常使用...
    多啦斯基周阅读 876评论 0 0
  • 最近在写Vue的时候,小小的尝试了一下Axios,总结一下自己的使用吧。 ##背景 Axios是一个基于Promi...
    Neyo_凉阅读 1,905评论 0 2
  • 概述 在前端开发过程中,我们经常会遇到需要发送异步请求的情况。而使用一个功能齐全,接口完善的HTTP请求库,能够在...
    grain先森阅读 1,570评论 0 4
  • 一首老歌 荔枝FM1900230 一首老歌,轻轻唱着 经常性的回忆,年轻时侯的自己,虽然还不算老,却也不太年轻,记...
    大鱼的世界阅读 823评论 1 3