一个axios的简单教程

最新推荐文章于 2022-07-16 10:47:32 发布
最新推荐文章于 2022-07-16 10:47:32 发布
阅读量187 收藏
点赞数
分类专栏： axios
原文链接：https://www.jianshu.com/p/13cf01cdb81f
版权

转载自https://www.jianshu.com/p/13cf01cdb81f

收录学习

首先要明白的是axios是什么：axios是基于promise（诺言）用于浏览器和node.js是http客户端。

axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

特点：支持浏览器和node.js

            支持promise

            能拦截请求和响应

            能转换请求和响应数据

            能取消请求

            自动转换JSON数据

             浏览器支持防止CSRF（跨站请求伪造）

这里你一定会想promise是什么东西，以下是promise的个人理解：

promise是什么：是一个对象用来传递异步操作的信息，它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的api，可供进一步的处理。

promise的作用：Promise的出现主要是解决地狱回调的问题，比如你需要结果需要请求很多个接口，这些接口的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有了Promise 我们就无需嵌套。

promise的本质是什么：分离异步数据获取和业务

基本使用方法：

axios执行GET请求

GET 请求方法

执行POST请求

POST请求方法

执行多个并发请求

多个并发请求

get和post都是基于promise的所以写法上很相似，是用then和catch，使用这种方法来进行发送请求。

还有一个axios重要的知识点就是拦截器

拦截器

在请求或响应被 then 或 catch 处理前拦截它们（拦截器可以做什么：在请求或者响应时拦截下来进行处理）

拦截器分为请求拦截器和响应拦截器

请求拦截器（interceptors.requst）是指可以拦截每次或指定HTTP请求，并可修改配置项。

响应拦截器（interceptors.response）可以在每次HTTP请求后拦截住每次或指定HTTP请求，并可修改返回结果项。

 

拦截器的写法

拦截器的工作流程：

拦截器工作流程

移除拦截器

移除拦截器

自定义 axios 实例添加拦截器

添加拦截器

取消

使用 cancel token 取消请求

可以使用 CancelToken.source 工厂方法创建 cancel token

参考资料：axios中文文档

微若轻澜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个简单的axios使用教程，安装、封装、使用
01-10
axios 使用教程，包括：安装、封装、使用
axios的简单教程与实例
LuckyBrown的博客
03-29 2919
首先要明白的是axios是什么：axios是基于promise（诺言）用于浏览器和node.js是http客户端。axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。特点：支持浏览器和node.js            支持promise&nbsp...
vue项目axios的使用实例详解
流楚丶格念的博客
06-26 6485
1、 基本用法 首先要在 main.js 中引⼊ axios 首先要在 main.js 中引⼊ axios 首先要在 main.js 中引⼊ axios （重要的事情说三遍！！！） 然后才能在组件中使⽤ axios 2、 axios实例 2.1、 创建axios实例示例代码 在配置文件（axios.js）中配置 在其他文件引入包后 也可以同时创建多个axios实例。也可以全部配置 2.3、 axios实例配置示例代码 也可以不用配置，现用现创建现配置 2.4、 axios请求配置示例代码 还可以直接在请求中
vue中使用axios
weixin_43439494的博客
08-30 343
##Axios是什么？ 1.支持Promiss API 2.拦截请求和响应 3.转换请求数据和响应数据 4.取消请求 5.自动转换json数据 6.客户端支持防御XSRF ##课程介绍 Axios基础用法(get,post,put等请求方法) Axios进阶方法(实例，配置，拦截器，取消请求等) Axios进一步封装，在项目中的实际应用 ###Axios的基础用法 get:获取数据 post:更新...
axios实例
intrwins的专栏
06-27 1043
axios实例
Axios
chengtang1959的博客
06-11 120
Axios 一个基于 promise 的 Http 库，可以用于浏览器和 node.js; 1.GET 请求 axios.get('/user?id=123').then((res)=>{ console.log(res); }).catch((error)=>{ ...
IDEA中Vue配置教程解释分析
06-27
node-v16.14.2-x64.msi安装文件; 创建Vue CLI工程; 启动Vue CLI工程; 停止已启动的项目; 关于Vue CLI工程结构; 关于`.vue`文件; 关于路由的简单配置; 使用Element UI; 使用Axios
mande：600字节便利且现代的包装器
02-05
简单，轻便且易于使用的包装器 需要支持。 mande具有更好的默认设置，可以使用fetch与API进行通信，因此与其编写： // creating a new user fetch ( '/api/users' , { method : 'POST' , headers : { Accept :...
Leadshop开源商城小程序源码 – 支持公众号H5，附带视频教程
最新发布
10-31
前端部分采用了uni-app、ES6、Vue、Vuex、Vue Router、Vue CLI、Axios和Element UI等技术。而后端则选用了Yii2框架，结合Jwt、Mysql和Easy-SMS等工具。 值得一提的是，Leadshop还提供了可视化DIY拖拽装修功能，使...
开源在线商城Leadshop小程序源码，公众号H5+带视频教程
10-29
前端uni-app 、 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui 后端Yii2、Jwt、Mysql、Easy-SMS 体验公众号：LEADSHOP 安装简单，Nginx伪静态，PHP7.4，mysql5.7+删除禁用函数symink
axios入门示例代码（带文档教程）
11-07
axios入门示例代码（带文档教程）
vue项目中使用axios实现简单前后端交互
ljh5920的博客
12-31 1758
axios：基于promise的HTTP库 首先使用vue-cli脚手架搭建基础单页项目 在目标文件夹打开终端输入以下命令以创建基础单页项目： （默认已安装npm） # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回车...
Axios基本使用 [前后端交互][Axios框架]
m0_57001006的博客
07-16 1071
Axios是Ajax的一个框架axios功能强大的网络请求库axios必须要先导入才可以使用axios为一个js库,使用前必须先导包。
axios交互及后端响应
路飞船长的博客
05-30 115
function jsonData(){ $axios({ url:"xxxxxx" type:'post' success:function(data){ alert(JSON.stringify(data)); },erro:function(error){ alert(error) } }) } @RequestMapping("xxxxx") public ResponseEntity<JsonResult> OutPatient(xxxxx){ JsonR
新手入门前端与后端交互案例(HTML+Java+Axios)
热门推荐
NoviceZ的博客
07-31 1万+
需求分析 前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果. 项目结构 后端项目结构 实现步骤 导入相关依赖包 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-start
Axios学习(3)---axios实例
从零出发
09-28 1003
一、axios实例的创建 比如：后端接口地址有多个（www.test.com、www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们可以创建实例。 思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求。代码如下： // 实例1 let instance = axios...
axios 的基本使用：
weixin_46174785的博客
05-07 1276
1、基本用法 安装 cnpm i axios --save 在 main.js 中引入 axios import axios from 'axios' Vue.prototype.$axios = axios 在组件中使用 axios <script> export default { mounted(){ this.$axios.get('/goods.json')....
简单axios实例
cgl_dong的博客
07-25 2380
Java作为后端，接受前端传入的数据 @Controller @RequestMapping("/axios") public class AxiosController { @RequestMapping("/he") public String hello(){ return "redirect:/axios.html"; } @Reques...
axios的介绍与使用
m0_50570745的博客
04-07 1869
一.什么是axios? axios是前端最流行的ajax请求库,react/vue官方都推荐使用axios发ajax请求。说到axios我们应该了解ajax，因为axios是基于ajax封装出来的。在旧浏览器页面向服务器发请求数据的时候，因为返回的是整个页面的数据，页面都会强制刷新，对于用户来说不是很友好，而且浪费资源，从服务器端发送给服务器的数据是整个页面的数据，浪费网络资源。基于前面的问题，我们需要修改的是页面的部分数据，不希望刷新页面，所以异步网络请求就诞生了。 ajax：异步网络请求，aja
vue3 axios配置
08-13
在Vue3中配置axios有多种方法，可以根据你的具体需求选择适合你的方式。以下是一些常用的配置方法： 方法一：在main.js中直接挂载axios 如果只需要简单地使用几个页面，无需太过复杂的配置，可以直接在main.js中进行挂载。首先，需要下载axios，可以使用以下命令： ``` npm i axios ``` 或者 ``` yarn add axios ``` 然后，在main.js中引入axios，并将其挂载为Vue的原型属性： ```javascript import Vue from "vue"; import axios from 'axios' Vue.prototype.$http = axios ``` 接下来，你可以通过`this.$http`来进行axios的请求。 方法二：使用Composition API 如果你正在使用Composition API，可以使用getCurrentInstance方法来获取当前实例，并通过该实例获取全局实例的配置。首先，需要在页面中引入相关的Composition API方法： ```javascript import { reactive, onMounted, getCurrentInstance } from "vue"; ``` 然后，在setup函数中使用getCurrentInstance方法获取当前实例，并通过该实例获取全局实例的config.globalProperties。具体代码如下： ```javascript setup() { let data = reactive([]); const currentInstance = getCurrentInstance(); const { $axios } = currentInstance.appContext.config.globalProperties; const getData = async () => { data = await $axios({ url: "/one/data" }); console.log("data", data); }; onMounted(() => { getData(); }); return { getData }; }, ``` 这样，在页面中就可以通过`$axios`来进行axios的请求。 方法三：使用拦截器 如果需要添加拦截器，可以在axios.js中进行配置。首先，创建一个axios实例，并进行相关的配置： ```javascript import axios from "axios"; const initAxios = axios.create({ timeout: 1800000 //设置数据响应过期时间 }); // 请求拦截器 initAxios.interceptors.request.use( (config) => { // 在发送之前做点什么 return config; }, (error) => { // 对请求错误做点什么 return error; } ); // 响应拦截器 initAxios.interceptors.response.use( (response) => { if (response.resultCode === 200) { return response.data; } else { return { resultCode: -1 }; } } ); export default () => initAxios; ``` 然后，在需要使用axios的地方引入该配置文件，并调用函数获取配置好的axios实例： ```javascript import initAxios from "./axios"; const axiosInstance = initAxios(); ``` 现在，你可以使用`axiosInstance`进行axios的请求，并且拦截器已经生效。 以上是一些常用的Vue3配置axios的方法，你可以根据具体情况选择适合你的方式进行配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue3中全局配置 axios 的两种方式](https://blog.csdn.net/weixin_56650035/article/details/125610295)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue3使用axios的配置教程详解](https://blog.csdn.net/qq_38682174/article/details/125416084)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值