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
• 博主Sam9029 的`Axios及网络基础专栏 `其他文章

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

关于Axios使用基础需要知道

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

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

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

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

Axios的请求方法

• 常用请求方法

• ⭐⭐特别注意 ⭐⭐特别注意 ⭐⭐特别注意
• 在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

待写

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

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

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

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

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