细谈Axios中那些不为人知的秘密!一文读懂Axios(一)

简介: 细谈Axios中那些不为人知的秘密!一文读懂Axios

Axios介绍

1、Axios是什么?

Axios是一个基于promise的HTTP库,类似于jQuery的ajax,用于http请求。可以应用于浏览器端和node.js,既可以用于客户端,也可以用于node.js编写的服务端。

2、Axios特性

(1)支持Promise API

(2)拦截请求与响应,比如:在请求前添加授权和响应前做一些事情。

(3)转换请求数据和响应数据,比如:进行请求加密或者响应数据加密。

(4)取消请求

(5)自动转换JSON数据

(6)客户端支持防御XSRF

3、浏览器支持情况

Firefox、Chrome、Safari、Opera、Edge、IE8+。

Axios基本使用

yarn add axios


import axios from "axios"
axios.get("/data.json").then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

打开控制台瞅两眼,已经有数据了

20210818200708225.png

Axios常用请求方法

方法列举:get, post, put, patch, delete等。

  • get:一般用户获取数据
  • post:一般用于表单提交与文件上传
  • patch:更新数据(只将修改的数据推送到后端)
  • put:更新数据(所有数据推送到服务端)
  • delete:删除数据

备注:post一般用于新建数据,put一般用于更新数据,patch一般用于数据量较大的时候的数据更新。

1、get方法

方式一

axios
      .get("/data.json", { 
        params: { 
          id: 12
        }
      })
      .then(res => { 
        console.log(res);
      })
      .catch(err => { 
        console.log(err);
      });

方式二

axios({ 
      method: "get",
      url: "/data.json",
      params:{ 
          id:12
      }
    }).then(res => { 
      console.log(res);
    });

带有参数后get请求实际是http://xxxxx/data.json?id=12,写了这么多结果就是url加了参数

浏览器控制台相关信息介绍:

  1. Request URL:请求URL
  2. Request Method:请求方式

2、post方法

post请求常用的数据请求格式有两种:

1.form-data(常用于表单提交(图片上传、文件上传))

let data = {
  id: 12
};
let formData = new FormData();
for(let key in data){ 
  formData.append(key,data[key])
}
console.log(formData)
axios.post('/data.json',formData).then(res=>{ 
  console.log(res,'formData')
})

注意:请求地址Request URL: http://xxxxxxx/data.json,


请求头中Content-Type: multipart/form-data; boundary=——WebKitFormBoundarydgohzXGsZdFwS16Y


参数形式:id:12


2.application/json(常用)


方式一


let data = {
  id: 12
};
axios.post("/data.json", data).then(res=>{ 
  console.log(res, 'post')
});

方式二

let data = {
  id: 12
};
axios({ 
  method:'post',
  url:'/data.json',
  data:data
}).then(res=>{ 
  console.log(res)
})


注意:请求地址Request URL: http://xxxxxxxx/data.json,

请求头中Content-Type: application/json;charset=UTF-8

参数形式:{ id:12 }

3、put方法

let data = { 
    id: 12
};
axios.put("/data.json", data).then(res=>{ 
    console.log(res, 'put')
});

4、patch方法

let data = { 
  id: 12
};
axios.patch("/data.json", data).then(res=>{ 
  console.log(res, 'patch')
});

5、delete方法

方式一:params

axios
      .delete("/data.json", { 
        params: { 
          id: 12
        }
      })
      .then(res => { 
        console.log(res, "delete");
      });
let params = { 
      id: 12
    };
    axios({ 
      method:'delete',
      url:'/data.json',
      params:params
    }).then(res=>{ 
      console.log(res)
    })

方式二:data

axios
      .delete("/data.json", { 
        data: { 
          id: 12
        }
      })
      .then(res => { 
        console.log(res, "delete");
      });
let data = { 
      id: 12
    };
    axios({ 
      method:'delete',
      url:'/data.json',
      data:data
    }).then(res=>{ 
      console.log(res)
    })

注意:params方式会将请求参数拼接在URL上面,Request URL: http://xxxxxxxx/data.json?id=12


参数形式:id:12


Content-Type: text/html; charset=utf-8


data方式不会讲参数拼接,是直接放置在请求体中的,Request URL: http://xxxxxxxx/data.json


参数形式:{id:12}


Content-Type: application/json;charset=UTF-8


总结:上述方法中均对应两种写法:(1)使用别名:形如axios.get();(2)不使用别名形如axios();


目录
相关文章
element整理<el-calendar>日历组件-假期(整理)
element整理<el-calendar>日历组件-假期(整理)
|
机器学习/深度学习 人工智能 云计算
拥抱不确定性:在技术迭代中保持持续学习的心态
【4月更文挑战第22天】 在快速变化的技术世界中,不确定性已成为唯一确定的事物。本文探讨了在不断演进的技术领域中如何维持一种积极的学习态度,以适应和克服挑战。通过分析技术进步的本质、分享个人经验,并提供应对策略,我们强调了终身学习的重要性,并讨论了如何在不确定性中找到成长的机会。
|
JavaScript Java 应用服务中间件
用白薅来的gitlab自带的gitlab-runner部署一个vue项目
用白薅来的gitlab自带的gitlab-runner部署一个vue项目
348 2
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
329 0
|
前端开发 安全 开发者
前端开发中的跨域资源共享(CORS)问题及解决方案探讨
在前端开发中,跨域资源共享(CORS)是一个常见且重要的问题。本文将深入探讨CORS的原理、影响以及解决方案,帮助开发者更好地应对跨域请求问题。
|
JavaScript 前端开发 API
js截取图片地址后面的参数和在路径中截取文件名或后缀名
在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
527 0
|
存储 算法 Java
性能优化:Java垃圾回收机制深度解析 - 让你的应用飞起来!
Java垃圾回收自动管理内存,防止泄漏,提升性能。GC分为标记-清除、复制、标记-整理和分代收集等算法。JVM内存分为堆、方法区等区域。常见垃圾回收器有Serial、Parallel、CMS和G1。调优涉及选择合适的GC、调整内存大小和使用参数。了解和优化GC能提升应用性能。
279 3
|
敏捷开发 前端开发 程序员
Hugeicons Flutter 图标库 | 4000+ 开源免费
在全栈开发的征途中,设计素材的匮乏往往是程序员的一大挑战,尤其是那些为MVP产品增添魅力的元素,比如图标(icons)。 一个优秀的免费图标库,对于快速搭建原型、优化视觉效果至关重要。今天,让我们聚焦于Flutter开发者的一个福音——Hugeicons图标库,它蕴藏着超过4000枚精心设计的图标,为你的应用程序注入无限创意潜力。
404 0
Hugeicons Flutter 图标库 | 4000+ 开源免费
|
Docker 容器
Docker安装Gitlab和Gitlab-Runner并实现项目CICD
Docker安装Gitlab和Gitlab-Runner并实现项目CICD
|
数据安全/隐私保护
vue-img-cutter 图片裁剪详解
vue-img-cutter 图片裁剪详解
419 1