axios的引入和基本使用

ops/2024/12/14 12:39:25/

一、axios的引入

使用 pnpm add axios

二、使用axios

三、axios的使用方法补充

axios除了直接使用它实例上的方法,还可以通过配置的方式进行使用axios({}),传入一个对象,这个对象可以有如下属性:

  1. url(字符串): 请求的 URL。

  2. method(字符串): 请求的 HTTP 方法,例如 ***\*'get'\*******\*'post'\****等。

  3. params(对象): 请求的 URL 参数,会被添加到 URL 后面,Get请求参数。

  4. data(对象): 请求的数据,通常用于 POST 请求的请求体,post请求参数。

  5. headers(对象): 请求头,可以设置各种头信息,例如'Content-Type'Authorization'等。

  6. timeout(数字): 请求超时时间,单位是毫秒。

  7. baseURL(字符串): 将被添加到 url 前面的基础 URL。

举个梨子: 

import axios from 'axios';//引入axios
console.log(axios);
//axios({传入请求配置对象})
axios({//url:'http://139.185.166.65:3001/api/axiostest'url: '/api/testGet',// 单纯放接口地址baseURL: 'http://139.183.166.65:3001',//可以把url里面的服务器地址这块单独配置//method:'get','post','delete','put'(修改)method: 'get',params: { name: 'liyan' },//常用于get请求传参 地址栏参数//data:{name:'liyan1'}// 常用于post请求传参 地址栏参数headers: { token: 200000 },timeout: 13000//超时时间,13秒后请求失败 默认是30000毫秒,30秒
})

四、错误展示

如果如上使用axios,出现一个问题,有一些配置项,会被重复书写的情况,我们可以使用axios.create这个方法,来创建一个axios的实例,将配置项配置到实例里,这样,我们就可以不用每次都重复去写配置项了,而是每次请求直接使用这个axios创建的实例就ok。

//const instance = axios.create(统一化配置)//就是请求所有都有的对象
const instance = axios.create({baseURL: 'http://139.186.166.35:3001',timeout: 13000,
})//对instance的使用,和axios一样的使用,只是节约那些配置项的重复代码
//instance.get(接口地址,请求配置对象)地址不是全部地址,是它的接口地址,
instance.get('/api/testGet?name=liyanjian').then((res) => {console.log(res);data.value = res.data.data
})
//post
instance({url: '/api/testPost',method: 'post',data: { name: 'jianpan' }
}).then((res) => {console.log("post请求");postData.value = res.data.data
})

 


http://www.ppmy.cn/ops/141819.html

相关文章

Polkadot 11 月生态月报:3900万交易量、69%增长率,技术与社区齐头并进

原文:https://x.com/Polkadot/status/1865118662069490074 编译:OneBlock 上个月对 Polkadot 生态来说可谓是跌宕起伏,从创下交易记录到开创性合作,Polkadot 热度不断。展现出强大的技术实力和蓬勃发展的社区活力。在回顾本月亮点…

3D开发工具HOOPS对B-Rep的支持:提升3D建模与可视化的精度与效率

在现代3D建模与计算机辅助设计(CAD)领域,“B-Rep(边界表示)"是一种广泛应用的几何建模技术。B-Rep通过定义三维对象的边界和拓扑结构,使得复杂的几何形状能够在计算机中准确表示并进行分析。作为前面的…

12.10 C语言作业3

课上类的三个练习题的构造函数 1. #include <iostream> using namespace std; class Rec {int length;int width; public:Rec(int length,int width):length(length),width(width){}void set_length(int l);void set_width(int w);int get_length();int get_width();v…

Rust 从入门到精通:开启高效安全编程之旅

摘要&#xff1a; 本文全面深入地介绍了 Rust 编程语言的学习路径&#xff0c;从基础语法起步&#xff0c;逐步深入到内存管理、并发编程、错误处理等核心特性&#xff0c;再到高级主题如宏编程、异步编程以及与其他语言的交互等方面&#xff0c;旨在帮助读者系统地掌握 Rust 语…

【LC】240. 搜索二维矩阵 II

题目描述&#xff1a; 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,…

KlearMax2.0一键AI换脸/图像变清晰增强老照片黑白修复

KlearMax 2.0 是一款功能强大的AI图像处理软件&#xff0c;最新版本带来了多项新功能&#xff0c;包括AI换脸、图像清晰度增强、老照片修复和上色等。 利用先进的智能算法&#xff0c;KlearMax 2.0能够一键处理模糊图像、修复老照片并平衡颜色&#xff0c;锐化细节&#xff0c;…

PPO系列3 - PPO原理

On Policy: 采集数据的模型&#xff0c;和训练的模型&#xff0c;是同一个。缺点&#xff1a;慢&#xff0c;生成一批样本数据&#xff0c;训练一次&#xff0c;又要重新生成下一批。 Off Policy: 采集数据的模型&#xff0c;和训练的模型&#xff0c;不是同一个。有点&#xf…

STM32模拟I2C通讯的驱动程序

目录 STM32模拟I2C通讯的驱动程序 开发环境 引脚连接 驱动程序 STM32模拟I2C通讯的驱动程序 开发环境 立创天空星开发板、主控芯片为STM32F407VxT6 引脚连接 使用stm32的PB9引脚模拟I2C时钟线SCL、PB8引脚模拟I2C数据线SDA 驱动程序 i2c.h文件如下&#xff1a;#ifndef…