猿创征文｜Aixos的引入与基本使用
Axios的引入与使用
官方中文网站 Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js (axios-http.cn)
官方中文网站使用用例 基本用例 | Axios 中文文档 | Axios 中文网 (axios-http.cn)
细谈Axios中那些不为人知的秘密！一文读懂Axios_前端纸飞机的博客-CSDN博客_axio
文章目录
- Axios的引入与使用
- @[toc]
- 使用---此文只阐述直接使用的步骤**
- 关于Axios使用基础需要知道
- 拓展：关于Axios在项目中的使用模式
- Axios的请求方法
- 引入-在项目中安装Axios依赖
- 直接使用-的基础语法的使用模板
- 在文件中引入Axios
- ⭐⭐基础语法（有很多种语法，介绍常用两种）
- 第一种：
- 第二种：(此文推荐使用--案例--皆采用此种axios语法)
- **以上两种语法 `完整写法` 具体例子与对比**
- 以vue构建的项目为例使用Axios
文章目录
- Axios的引入与使用
- @[toc]
- 使用---此文只阐述直接使用的步骤**
- 关于Axios使用基础需要知道
- 拓展：关于Axios在项目中的使用模式
- Axios的请求方法
- 引入-在项目中安装Axios依赖
- 直接使用-的基础语法的使用模板
- 在文件中引入Axios
- ⭐⭐基础语法（有很多种语法，介绍常用两种）
- 第一种：
- 第二种：(此文推荐使用--案例--皆采用此种axios语法)
- **以上两种语法 `完整写法` 具体例子与对比**
- 以vue构建的项目为例使用Axios
使用—此文只阐述直接使用的步骤**
关于Axios使用基础需要知道
- 请求方式 ，最常用的两个
getpost，其他put,patch,delete等。 - axios使用语法
拓展：关于Axios在项目中的使用模式
关于Axios在项目中的使用模式，其实可以大体分为两种
- 直接引入使用
- 项目中一般不会直接使用，但作为学习的案例可以让我们快速理解Axios的使用
- 封装实例后使用 （详情见文章-基于Axios的二次封装）
- ❗项目中都会对Axios进行封装使用
Axios的请求方法
- 常用请求方法
⭐get： | 一般用户获取数据 |
|---|---|
⭐ post： | 一般用于表单提交与文件上传 |
patch： | 更新数据（只将修改的数据推送到后端） |
put： | 更新数据（所有数据推送到服务端） |
delete： | 删除数据 |
- ⭐⭐特别注意 ⭐⭐特别注意 ⭐⭐特别注意
- 在axios请求中数据携带参数设置有差异
- 只有
get请求用param❗❗❗（也可以在url地址最后跟问号+参数） post和其他请求方式 用data❗❗❗
例子：（先理解-可看完后面的内容再回来看-特别注意）
//get
axios({
method:'get',
url:'/url',
//❗❗❗param
param:null,
})
//post,put,patch,delete
axios({
method:'post/put/patch/delete',
url:'/url',
//❗❗❗data
data:null,
})
引入-在项目中安装Axios依赖
- 以 npm 包管理工具 为例
npm install axios
引入后即可在 package.json中查看，是否引入成功
直接使用-的基础语法的使用模板
- 使用前记得
npm install axios安装
在文件中引入Axios
import axios from 'axios'
⭐⭐基础语法（有很多种语法，介绍常用两种）
- 注意此处
axios的使用语法有很多种,常见的如下
第一种：
axios.请求方式(访问地址,请求参数).then().catch()
第二种：(此文推荐使用–案例–皆采用此种axios语法)
axios({
method:请求方式,
url:访问地址,
param/data:请求参数,
}).then().catch()
以上两种语法 完整写法 具体例子与对比
/url指的访问地址then的catch使用 都是用函数接收 响应的参数then用于接收 响应成功 并作后续处理catch用于接收 响应失败 并作后续处理
import axios from 'axios'
//第一种完整写法//第一种//第一种//第一种//第一种//第一种//第一种
// 向给定地址请求
axios.get('/url')
.then(function (response) {
// 处理成功情况 用then
console.log(response);
})
.catch(function (error) {
// 处理错误情况 用catch
console.log(error);
})
//第二种完整写法//第二种//第二种//第二种//第二种//第二种//第二种
// 向给定地址请求
axios({
method:'get/post/put/patch/delete',
url:'/url',
// 请求参数一般是 对象格式
param/data:Object,
})
.then(function (response) {
// 处理成功情况 用then
console.log(response);
})
.catch(function (error) {
// 处理错误情况 用catch
console.log(error);
})
以vue构建的项目为例使用Axios
待写
**🐱🐉🐱🐉恭喜你，都看到这了，求赞，求收藏，求评论不过分吧**