axios 的理解和使用

最新推荐文章于 2024-08-12 17:01:01 发布

雨季mo浅忆

最新推荐文章于 2024-08-12 17:01:01 发布

阅读量854

点赞数

分类专栏：前端文章标签： axios

本文链接：https://blog.csdn.net/weixin_58099903/article/details/123906326

版权

前端专栏收录该内容

159 篇文章 29 订阅

订阅专栏

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尝试请求快速结束
    else
        next();
})


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'){ //是取消请求导致的errer
                console.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博客