猿创征文｜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 可响应api案例
• • 🔥步骤
• 🦖博主Sam9029 的`Axios及网络基础专栏 `其他文章

使用—此文只阐述直接使用的步骤**

无需纠结，往下看

关于Axios使用基础需要知道

• ⭐请求方式 ，
  • 最常用的两个get post ，
  • 其他 put, patch, delete等。
• ⭐axios使用语法

---

Axios的请求方法

• 常用请求方法

（待写）关于http请求中的get，post原理

---

⭐⭐基础语法（有很多种语法，介绍常用两种）

• 注意此处 axios 的使用语法有很多种,常见的如下

第一种：

axios.请求方式(访问地址,请求参数).then().catch()
1

第二种：(此文推荐使用–案例–皆采用此种axios语法)

axios({
	method:请求方式,
	url:访问地址,
	//注意此处，params/data
	params/data:请求参数,
}).then().catch()
1
2
3
4
5
6

关于then() catch() 实际上来自捕获错误的用法
使用方式在·后面介绍

⭐⭐特别注意 在axios请求中数据携带参数设置有差异

⭐⭐特别注意 ⭐⭐特别注意

• 只有get 请求用 params❗❗❗（也可以在url地址最后跟问号+参数）
  • 注意是 params 有s啊 ,特此更正，之前写错了
• post 和其他请求方式 用 data❗❗❗
• (detele则可以params，data都可以用)

例子：

//get
axios({
    method:'get',
    url:'/url',
    //❗❗❗params
    params:null,
})

//post,put,patch,delete
axios({
    method:'post/put/patch/delete',
    url:'/url',
    //❗❗❗data
    data:null,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

关于Axios在项目中的使用模式

关于Axios在项目中的使用模式，其实可以大体分为两种

• 直接引入使用 （⭐本文详写）
  • 项目中一般不会直接使用，
  • 但作为学习的案例可以让我们快速理解Axios的使用
• 封装实例后使用 （本文未涉及）
  • ❗项目中都会对Axios进行封装使用(亦称二次封装)
  • 详情见文章-基于Axios的二次封装

    • 解释为什么要二次封装？

---

直接引入使用

在项目中安装Axios依赖，以 npm 包管理工具 为例

npm install axios
1

引入后即可在 package.json中查看，是否引入成功

---

直接使用-的基础语法的使用模板

• 使用前记得 npm install axios 安装

在文件中引入Axios

import axios from 'axios'
//使用前 一定要 引入！！！⭐⭐
1
2

使用源码

import axios from 'axios'
//第二种完整写法//第二种//第二种//第二种//第二种//第二种//第二种
// 向给定地址请求
axios({
    method:'get/post/put/patch/delete',
	url:'/url',
    // 请求参数一般是 对象格式
	params/data:Object,
})
  .then(function (response) {
    // 处理成功情况 用then
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况 用catch
    console.log(error);
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

完整写法 具体例子说明

• /url 指的访问地址
• then， catch 都是使用 用函数接收响应的参数
  • then( (req) => {} )
  • catch( (err) => {} )
  • 可使用箭头函数简写
• then 用于接收 响应成功 并作后续处理
• catch 用于接收 响应失败 并作后续处理

另一种写法

//第一种完整写法//第一种//第一种//第一种//第一种//第一种//第一种
// 向给定地址请求
axios.get('/url')
  .then(function (response) {
    // 处理成功情况 用then
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况 用catch
    console.log(error);
  })
1
2
3
4
5
6
7
8
9
10
11

---

以vue构建的项目为例 使用Axios 可响应api案例

注意（本实例仅采用get请求方式作为教学）
其他请求方式，仅在参数的传递上有异同

🔥步骤

• 安装 npm i axios
• 创建 test.vue文件

• test.vue 写入以下内容

import myAxios from 'axios'   

let resData = myAxios({
        method:'GET',
        //真实可用的Api
        url:'http://gmall-h5-api.atguigu.cn/api/product/getBaseCategoryList',
        // 有参数 可写 //注意，除get请求外使用data作为参数属性
        //params:{},
    })
    .then(
    	//正常响应接收返回参数
        (res)=>{
            console.log(res)
        }
    )
    .catch(
    	//请求异常输出报错
    	(err)=>{
            console.log(err)
        }
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---

🦖博主Sam9029 的Axios及网络基础专栏 其他文章

🐸Axios的介绍与作用 - 大白话_Sam9029的博客-CSDN博客

🐸(Aixos的引入与基本使用_Sam9029的博客-CSDN博客

🐸基于Axios的二次封装基础模板-可直接CV_Sam9029的博客-CSDN博客

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求赞，求收藏，求评论不过分吧**
1