axios网络模块封装

原创已于 2022-04-18 10:23:27 修改 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-14 17:19:45 首次发布

前端专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了如何使用axios发送GET和POST请求，包括参数传递、并发请求的利用，以及如何设置全局和局部拦截器来定制网络请求行为。重点讲解了axios的配置项，如默认参数和数据格式，并展示了如何创建并管理不同实例的配置。

网络测试
httpbin.org
发送普通的请求
在这里插入图片描述
get请求可以直接拼到URL后面

也可以将参数放到params对象中

axios发送并发请求

spread可以把值展开

数组的解构

对象的解构

axios配置信息相关

原始信息

defaults全局配置
使用全局的axios和对应的配置在进行网络请求
在这里插入图片描述
常见的配置选项

get请求—params
post请求—data
export default Axios //因为是default，所以import可以随意起名字
import axios from ‘xxxxx’

export default //只能导出一个实例
export const，function… //可以导出多个实例
在这里插入图片描述

创建axios的实例
在这里插入图片描述

在这里插入图片描述
创建第二个实例

拦截器
全局拦截器

局部拦截器
请求拦截
1.比如config中的一些信息不符合服务器的要求

// 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标

// 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息

在这里插入图片描述
响应拦截

响应拦截需要返回，返回的时候，只需要返回data，其他是axios框架加上去的，没用