Axios知识点总结 2024蓝桥杯Web赛道/Axios学习总结

打印 上一主题 下一主题

主题 855|帖子 855|积分 2565

Axios API

知识点形貌示例代码Axios 实例用于发送 HTTP 请求的 Axios 实例。javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com' });请求设置发送请求时可设置的参数,如 URL、方法、数据、头部等。javascript instance.get('/users', { params: { page: 1, limit: 10 } });默认设置设置 Axios 实例的默认参数,如底子 URL、请求超时时间、请求头等。javascript const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 5000, headers: { 'Content-Type': 'application/json' } });拦截器拦截请求或响应,可以在处理之前对它们进行拦截,用于添加公共处理逻辑或错误处理。javascript // 请求拦截器 instance.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }); // 响应拦截器 instance.interceptors.response.use(response => { // 对响应数据做些什么 return response; }, error => { // 对响应错误做些什么 return Promise.reject(error); });

Axios 实例

知识点形貌示例代码Axios 实例用于发送 HTTP 请求的 Axios 实例。javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com' });底子 URL请求的底子 URL,用于构建请求的完备 URL。javascript const instance = axios.create({ baseURL: 'https://api.example.com' });超时时间请求超时时间,单位为毫秒。javascript const instance = axios.create({ timeout: 5000 });默认头部在每个请求中发送的默认头部信息。javascript const instance = axios.create({ headers: { 'Content-Type': 'application/json' } });请求方法发送请求时利用的 HTTP 方法。javascript instance.get(url); instance.post(url, data);请求拦截器在发送请求之前拦截请求并修改或添加信息。javascript instance.interceptors.request.use(config => { /* 操作 config */ return config; }, error => { return Promise.reject(error); });响应拦截器在吸收到响应之后拦截响应并修改或处理数据。javascript instance.interceptors.response.use(response => { /* 操作 response */ return response; }, error => { return Promise.reject(error); });

Axios 请求设置

知识点形貌示例代码参数发送请求时的参数,如查询参数、请求体等。javascript instance.get('/users', { params: { page: 1, limit: 10 } });URL请求的 URL,可以是完备的 URL 或相对路径。javascript instance.get('https://api.example.com/users');方法发送请求时利用的 HTTP 方法。javascript instance.get(url); instance.post(url, data);数据发送的数据,用于 POST、PUT、PATCH 等请求。javascript instance.post(url, data);头部发送请求时的自定义头部信息。javascript instance.get(url, { headers: { 'Authorization': 'Bearer token' } });超时时间请求超时时间,单位为毫秒。javascript instance.get(url, { timeout: 5000 });响应数据范例期望的响应数据范例,可选项为 'json', 'text', 'blob' 等。javascript instance.get(url, { responseType: 'json' });请求转换用于修改请求数据的转换器。javascript const data = { key: 'value' }; const transformRequest = [function (data) { /* 转换逻辑 */ return data; }];响应转换用于修改响应数据的转换器。javascript const transformResponse = [function (data) { /* 转换逻辑 */ return data; }];

Axios 默认设置

知识点形貌默认值底子 URL请求的底子 URL,用于构建请求的完备 URL。undefined超时时间请求超时时间,单位为毫秒。0 (表示不设置超时时间)请求头部在每个请求中发送的默认头部信息。{ 'Accept': 'application/json, text/plain, */*' }响应数据范例期望的响应数据范例,可选项为 'json', 'text', 'blob' 等。json请求转换函数用于修改请求数据的转换器数组。undefined响应转换函数用于修改响应数据的转换器数组。undefined最大重定向次数在 Node.js 中,设置最大重定向次数。5最大响应大小在 Node.js 中,设置最大允许的响应数据大小,以字节为单位。200000000 (200 MB)基于内容的缓存决定是否基于请求的内容生成缓存密钥。false身份验证信息发送请求时用于身份验证的信息。undefined毗连的署理用于发出请求的署理。falsehttpAgent用于控制 Node.js 中 http 请求的选项。{ keepAlive: true }httpsAgent用于控制 Node.js 中 https 请求的选项。{ keepAlive: true }xsrfCookieName用作 XSRF 令牌的值的 cookie 名称。'XSRF-TOKEN'xsrfHeaderName包罗 XSRF 令牌的值的 HTTP 头部名称。'X-XSRF-TOKEN'maxContentLength设置允许的响应内容的最大长度。-1 (表示没有限制)maxBodyLength设置请求体的最大大小。-1 (表示没有限制)

Axios 拦截器

知识点形貌示例代码请求拦截器在请求发送前执行的函数,可以修改请求或添加额外的设置。javascript axios.interceptors.request.use(config => { /* 修改请求设置 */ return config; }, error => { return Promise.reject(error); });响应拦截器在吸收到响应后执行的函数,可以修改响应数据或处理错误信息。javascript axios.interceptors.response.use(response => { /* 处理响应数据 */ return response; }, error => { return Promise.reject(error); });拦截器序次请求拦截器和响应拦截器的执行序次。请求拦截器先于响应拦截器执行。多个拦截器可以同时存在多个请求拦截器和响应拦截器。javascript axios.interceptors.request.use(/* 第一个请求拦截器 */); axios.interceptors.request.use(/* 第二个请求拦截器 */);拦截器的移除可以移除已注册的拦截器。javascript const interceptor = axios.interceptors.request.use(/* 拦截器 */); axios.interceptors.request.eject(interceptor);全局错误处理在拦截器中捕获请求或响应的错误,并统一进行处理。javascript axios.interceptors.response.use(response => { /* 处理成功响应 */ return response; }, error => { /* 处理错误响应 */ return Promise.reject(error); });

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

花瓣小跑

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表