后端上手学习axios基础知识

前言

axios 可以通过支持发送http请求,可以方便的向后端请求数据,可以实现异步请求,取消请求,拦截器等配置

基础使用

安装axios

通过npm命令或者yarn命令可以安装依赖

csharp 复制代码
npm install axios / yarn add axios

基本用法

可以直接通过axios配置config来构建请求 , 发送get请求/post请求,通过调取get方法实现调用get请求,post方法则为post请求,通过then方法来接受异步请求的结果返回,通过catch来接收请求的错误返回

ini 复制代码
axios(config)

axios({
    method:"",
    headers:{},
    data:{},
    params:{}
}).then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

第一种:get请求第一个参数配置url地址,第二个参数配置config,可以配置参数params对象也就是get请求问号后的参数,可以配置请求头headers对象

php 复制代码
// axios.get(url,config)

axios.get("http://localhost:3000/get",
{
    params:{name:""},
    headers:{}
})

第二种:当post请求的时候,第一个参数配置url地址,第二个配置data数据内容,第三个参数配置config,可以配置参数params对象也就是get请求问号后的参数,可以配置请求头headers对象

php 复制代码
// axios.post(url,data,config)

axios.post("http://localhost:3000/post",
{
    name:"sss"
},
{
    params:{age:1},
    headers:{}
})

第三种:对于 请求头是content-typemultipart/form-data的时候 , 构造参数有些许不同,需要借助 FormData 对象来实现

go 复制代码
const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Blob([1,2,3]));
form.append('my_file', fileInput.files[0]);

axios.post('https://example.com', form)

第四种: 对于请求头content-typeapplication/x-www-form-urlencoded, 需要引用 qs或者 URLSearchParams 来实现 ,但因为 URLSearchParams存在并不一定都支持。

csharp 复制代码
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

响应和异常

对于then方法后面的response可以获取到的响应结果。

  • data: 获取到请求结果的返回
  • headers : 获取到请求的请求头
  • config: 获取到请求的配置信息
  • status: 获取请求的状态码
vbscript 复制代码
response.data
response.headers

对于catch方法后面的error可以捕获到异常结果。

  • message : 返回的错误信息
  • response: 返回服务器的响应
  • config: 获取到请求的配置信息

创建实例

如果需要为不同的 API 设置不同的基础配置,可以创建 Axios 实例

arduino 复制代码
const instance = axios.create({
  baseURL: 'https://api.example.com', // url地址
  timeout: 5000, // 超时时间
  headers: { 'Authorization': 'Bearer your_token_here' } // 请求头
});

然后可以通过instance在构建不同状态的请求函数方法

php 复制代码
instance(config)

instance({
    method:"",
    headers:{},
    data:{},
    params:{}
})

配置拦截器

注意:如果你需要对具体的实例来进行拦截配置,通过前面的 instance来配置

ini 复制代码
instance.interceptors.request.use(config => {},error => {})

请求拦截器

一般可以用来对请求头,主要是对发送请求前的一些初步的构建参数内容。

ini 复制代码
axios.interceptors.request.use(config => {
  // 在发送请求前添加 token
  config.headers.Authorization = 'Bearer your_token_here';
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

一般可以用来对响应数据进行的判断处理,可以对返回的结果错误结果统一的封装

ini 复制代码
axios.interceptors.response.use(response => {
  // 对响应数据进行处理
  return response;
}, error => {
  // 统一处理错误
  if (error.response.status === 401) {
    console.error('未授权,请重新登录');
  }
  return Promise.reject(error);
});`

项目使用

在我们封装请求来实现时,一般会通过Promise 再包裹一层。 而且一般会创建实例,来封装对应的请求前缀和赋值token等信息,也有对返回的响应做通用结果的处理,就会用到对应的拦截器。

相关推荐
paopaokaka_luck9 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
Villiam_AY13 分钟前
Redis 缓存机制详解:原理、问题与最佳实践
开发语言·redis·后端
魔尔助理顾问4 小时前
系统整理Python的循环语句和常用方法
开发语言·后端·python
程序视点4 小时前
Java BigDecimal详解:小数精确计算、使用方法与常见问题解决方案
java·后端
你的人类朋友4 小时前
❤️‍🔥微服务的拆分策略
后端·微服务·架构
AI小智6 小时前
后端变全栈,终于可以给大家推出我的LangChain学习小站了!
后端
lkf197116 小时前
商品中心—1.B端建品和C端缓存
开发语言·后端·缓存
我的ID配享太庙呀6 小时前
Django 科普介绍:从入门到了解其核心魅力
数据库·后端·python·mysql·django·sqlite
java叶新东老师7 小时前
goland编写go语言导入自定义包出现: package xxx is not in GOROOT (/xxx/xxx) 的解决方案
开发语言·后端·golang
码事漫谈9 小时前
C++模板元编程从入门到精通
后端