axios 是什么

axios 特点

axios 中文文档

axios 常用语法

axios 安装

axios 简单使用

默认 get 请求

post 请求

axios 难点语法

axios.create(config) 对 axios 请求进行二次封装

axios的处理链流程拦截器

取消请求

请求前 / 后数据处理

axios 是什么

前端最流行的 ajax 请求库

react / vue 官方推荐使用 axios 发 ajax 请求

文档 https://github.com/axios/axios

axios 特点

基于 promise 的异步 ajax 请求库

浏览器端 /node 端都可以使用

支持请求 / 响应拦截器

支持请求取消

请求 / 响应数据转换

批量发送多个请求

axios 中文文档

axios中文网|axios API 中文文档 | axios

axios 常用语法

axios 安装

axios 简单使用

默认 get 请求

// 配置默认基本路径
axios.defaults.baseURL = 'http://localhost:3000'// 默认 get 请求
axios({url:"/posts",params:{id:1}
}).then(res=>{console.log(res)
},err=>{console.log(err)
})

post 请求

// post 请求
axios.post("/posts",{id:1}).then(res=>{console.log(res)
},err=>{console.log(err)
})// 或axios({url:"/posts",method:'post'data:{id:1}
}).then(res=>{console.log(res)
},err=>{console.log(err)
})

axios 难点语法

axios.create(config) 对 axios 请求进行二次封装

简单使用：

const instance = axios.create({baseURL:"http://localhost:3000"
})// 使用 instance 发请求
instance({url:"/posts"
})// 或
instance.get("/posts")

同时请求多个端口号：

const instance = axios.create({baseURL:"http://localhost:3000"
})const instance2 = axios.create({baseURL:"http://localhost:4000"
})// 同时请求 端口号 3000 4000// 使用 instance 发请求
instance({url:"/posts"
})// 使用 instance2 发请求
instance2({url:"/posts"
})

axios的处理链流程拦截器

拦截器简单使用：

// 添加请求拦截器
axios.interceptors.request.use(config=>{// config 请求配置// 可用于// 发送网络请求时，在界面显示一个请求的同步动画// 某些请求（比如登录（token））必须携带一些特殊的信息// 请求成功拦截console.log("请求拦截器")return config
},err=>{// 请求失败拦截return Promise.reject(err)
})  // 添加响应拦截器
axios.interceptors.response.use(res=>{// res 响应结果// 响应拦成功拦截console.log("响应拦截器")return res
},err=>{// 响应拦失败拦截return Promise.reject(err)
})  console.log("开始请求")
axios.get("http://localhost:3000/posts")
.then(res=>{console.log("res:",res)console.log("请求结束")
})

多个拦截器

请求拦截器后添加先执行

// 添加请求拦截器
axios.interceptors.request.use(config=>{console.log("请求拦截器")return config
},err=>{return Promise.reject(err)
})  axios.interceptors.request.use(config=>{console.log("请求拦截器--------2")return config
},err=>{return Promise.reject(err)
})  axios.interceptors.request.use(config=>{console.log("请求拦截器--------3")return config
},err=>{return Promise.reject(err)
})  // 添加响应拦截器
axios.interceptors.response.use(res=>{console.log("响应拦截器")return res
},err=>{return Promise.reject(err)
})  axios.interceptors.response.use(res=>{console.log("响应拦截器---------2")return res
},err=>{return Promise.reject(err)
}) axios.interceptors.response.use(res=>{console.log("响应拦截器----------3")return res
},err=>{return Promise.reject(err)
})console.log("开始请求")
axios.get("http://localhost:3000/posts")
.then(res=>{console.log("res:",res)console.log("请求结束")
})

取消请求

1. 基本流程

配置 cancelToken 对象
缓存用于取消请求的 cancel 函数
在后面特定时机调用 cancel 函数取消请求
在错误回调中判断如果 error 是 cancel ，做相应处理

2. 实现功能

node 运行 server.js
安装 node 和 express （npm install express）

var http = require("http");var express = require("express")
// var server = http.createServer();
var app = express()// node跨域设置
app.all("*",function(req,res,next){// 设置允许跨域的域名，*代表允许任意域名跨域res.header("Access-Control-Allow-Origin","*");// 允许的header类型res.header("Access-Control-Allow-Headers","content-type");// 跨域允许的请求方式 res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");if (req.method.toLowerCase() == 'options')res.send(200);  // 让options尝试请求快速结束elsenext();
})app.get('/',function(res,req){console.log("获取客户端请求",res);// 延迟响应 方便测试取消接口setTimeout(function(){req.end("延迟响应 方便测试取消接口"); // 响应客户数据},5000)})app.listen(4000,function(){console.log("服务器启动成功，可以通过 http://127.0.0.1:4000 进行访问")
})

在 cmd 窗口

node server.js

调用接口测试
axios.isCancel(err) // 判断错误是否是取消请求导致的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
</head>
<body><script>let cancel;// axios({//     url:"http://localhost:4000",//     cancelToken:new axios.CancelToken(function(c){//         cancel = c//     })// })// 或axios.get("http://localhost:4000",{cancelToken:new axios.CancelToken(function(c){// c 用于取消当前请求的函数cancel = c})}).then(res=>{console.log("res:",res)cancel = null //请求完成，清空cancel},err=>{cancel = null if(err.constructor.name === 'Cancel'){ //是取消请求导致的errerconsole.log("取消请求导致error:",err)}else{console.log("err:",err)}// 或// axios.isCancel(err) //判断错误是否 是取消请求导致的});setTimeout(function(){if(typeof(cancel) === 'function'){cancel('强制取消了请求')}else{console.log("没有可取消的请求")}},2000)</script>
</body>
</html>

正常请求

取消接口

在请求拦截器里面统一添加取消请求

axios.interceptors.request.use(res=>{res['cancelToken'] = new axios.CancelToken(function(c){cancel = c})return res
},err=>{return Promise.reject(err)
})

在响应拦截器里面统一添加处理取消请求

axios.interceptors.response.use(res=>{return res
},err=>{if(axios.isCancel(err)){// 中断promise链接return new Promise(()=>{})}else{// 把错误继续向下传递return Promise.reject(err)}
})

代码简化实现上一个接口还未响应下一个接口开始请求，把上一个接口取消

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
</head>
<body><script>let cancel;axios.interceptors.request.use(config=>{// 实现上一个接口还未响应  下一个接口开始请求，把上一个接口取消if(typeof(cancel) === 'function'){cancel('强制取消了请求')}config['cancelToken'] = new axios.CancelToken(function(c){cancel = c})return config},err=>{return Promise.reject(err)}) axios.interceptors.response.use(res=>{cancel = null return res},err=>{cancel = null if(axios.isCancel(err)){console.log("取消上一个请求")// 中断promise链接return new Promise(()=>{})}else{// 把错误继续向下传递return Promise.reject(err)}})  function request(){axios.get("http://localhost:4000").then(res=>{console.log("res:",res)},err=>{console.log("err:",err)});}request()request()</script>
</body>
</html>

请求前 / 后数据处理

// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
transformRequest:[function (data, headers) {// 对 data 进行任意转换处理return data;
}],// 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {// 对 data 进行任意转换处理return data;
}],

axios 数据请求二次封装及实战案例_雨季mo浅忆的博客-CSDN博客

axios 的理解和使用相关推荐

axios从入门到源码分析 -http-xhr
axios从入门到源码分析 1 HTTP相关 1.1.MDN文档 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview 1.2. HTT ...
axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios
目录 axios 的理解和应用 axios 特点: 使用 axios 发 ajax请求 1. 发送 GET 请求 axios get完整版: axios get精简版: axios get请求发送时携 ...
axios的使用（请求，响应拦截器）
axios的使用本篇博客简要讲述本人在前端vue开发过程中对于axios的理解文章目录 axios的使用前言一.axios是什么? 二.使用步骤 1.引入库 2.axios使用 1,引用axi ...
尚硅谷 Ajax与Axios的使用与关键源码笔记
文章目录 Ajax概述原生Ajax尝试请求的发送与请求头配置 JSON支持 IE缓存问题请求的取消与重发 jQuery的Ajax 使用Axios发送Ajax[简易] 使用fetch发送请求 Aj ...
一个项目学会前端实现登录拦截
一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言该项目是利用了Github 提供的personal token作为登录token ...
react-移动端项目
移动端项目一明确案例的需求需要理解的概念有: 手机验证码的登录手机验证码的获取第三方平台的授权登录第三方平台用户信息的获取二 antd的基本使用需要理解的概念有: React的UI框架 ...
axios-引入-常用语法-源码
axios 1 axios的引入 1.1. axios是什么? 前端最流行的ajax请求库 react/vue官方都推荐使用axios发ajax请求文档: https://github.com/ax ...
Vue 中常见的面试题/知识点整理
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚 ...
2年vue项目实战经验汇总
前言 vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广泛的应用,与 ...

axios 的理解和使用

axios 是什么

axios 特点

axios 中文文档

axios 常用语法

axios 安装

axios 简单使用

默认 get 请求

post 请求

axios 难点语法

axios.create(config) 对 axios 请求进行二次封装

axios的处理链流程拦截器

取消请求

请求前 / 后数据处理

axios 的理解和使用相关推荐

最新文章

热门文章

axios 的理解和使用

axios 是什么

axios 特点

axios 中文文档

axios 常用语法

axios 安装

axios 简单使用

默认 get 请求

post 请求

axios 难点语法

axios.create(config) 对 axios 请求进行二次封装

axios的处理链流程 拦截器

取消请求

请求前 / 后数据处理

axios 的理解和使用相关推荐

最新文章

热门文章

axios的处理链流程拦截器