全部标签
写点什么
OpenHarmony算法元宇宙MySQL移动开发算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业生涯规划知识管理运维产品经理 查看更多

Axios 的引入与使用 - 提供可响应 api 案例

作者：Sam9029
  • 2022 年 9 月 08 日
    四川

  • 本文字数：1798 字

    阅读完需：约 6 分钟

Axios的引入与使用-提供可响应api案例

Axios 的引入与使用

官方中文网站 Axios 中文文档

官方中文网站使用用例 基本用例 | Axios 中文文档

细谈Axios中那些不为人知的秘密！一文读懂Axios_前端纸飞机的博客-CSDN博客_axio


使用方式---此文只阐述直接使用的步骤

无需纠结，往下看

在使用方式哪里有讲

关于 Axios 使用基础需要知道

  • ⭐请求方式 ，

  • 最常用的两个get post ，

  • 其他 put, patch, delete等。

  • ⭐axios 使用语法


Axios 的请求方法

  • 常用请求方法

  • ⭐get：一般用于获取数据

  • ⭐ post：一般用于表单提交与文件上传

  • patch：更新数据（只将修改的数据推送到后端）

  • put：更新数据（所有数据推送到服务端）

  • put：删除数据


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


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

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

第一种：

axios.请求方式(访问地址,请求参数).then().catch()
复制代码

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

saxios({    method:请求方式,    url:访问地址,    //注意此处，params/data    params/data:请求参数,}).then().catch()
复制代码


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

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

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


  • 只有get 请求用 params❗❗❗

  • 也可以不用使用 params，

  • 直接在在 url 地址最后跟问号+参数

  • 如 url:访问地址?name=value

  • post 和其他请求方式 用 data❗❗❗

  • (detele则可以params，data都可以用)


例子：


//getaxios({    method:'get',    url:'/url',    //❗❗❗params    params:null,})
//post,put,patch,deleteaxios({    method:'post/put/patch/delete',    url:'/url',    //❗❗❗data    data:null,})
复制代码


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

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


  • 直接引入使用 （⭐本文详写）

  • 项目中一般不会直接使用，

  • 但作为学习的案例可以让我们快速理解 Axios 的使用

  • 封装实例后使用 （本文未涉及）

  • ❗项目中都会对 Axios 进行封装使用(亦称二次封装)

  • 详情见文章-基于Axios的二次封装

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


直接引入使用

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


npm install axios
复制代码


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


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

  • 使用前记得 npm install axios 安装

在文件中引入 Axios

import axios from 'axios'//使用前 一定要 引入！！！⭐⭐
复制代码

使用源码

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);  })
复制代码

完整写法 具体例子说明

  • /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);  })
复制代码


以 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)        }    )
复制代码


🦖我是 Sam9029 ，一个前端

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


划线
评论
复制
发布于: 刚刚阅读数: 4

版权声明: 本文为 InfoQ 作者【Sam9029】的原创文章。

原文链接:【http://xie.infoq.cn/article/30620059465a76e35969c1c4e】。文章转载请联系作者。

前端网络axios9月月更
用户头像

Sam9029

关注

庸俗 2022.09.03 加入

好色

评论

发布
暂无评论
Copyright © 2022, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
Axios的引入与使用-提供可响应api案例_前端_Sam9029_InfoQ写作社区