Axios入门使用

文章目录

Axios入门使用

一、引言

随着前端技术的发展,前后端分离已成为标准开发模式。Axios作为一种基于Promise的HTTP客户端,被广泛应用于浏览器和node.js中,用于执行HTTP请求。本篇博客将详细介绍Axios的基本使用。

二、Axios的安装与配置

1、安装Axios

首先,需要安装Axios库。可以通过npm或yarn进行安装:

shell 复制代码
npm install axios

或者

shell 复制代码
yarn add axios

也可以通过CDN直接引入到HTML文件中:

html 复制代码
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2、创建Axios实例

Axios可以创建实例,以便于根据不同的环境进行配置:

javascript 复制代码
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

三、发送HTTP请求

1、GET请求

使用Axios发送GET请求非常简单,如下所示:

javascript 复制代码
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

也可以通过params对象传递查询参数:

javascript 复制代码
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2、POST请求

发送POST请求,可以使用以下代码:

javascript 复制代码
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3、并发请求

Axios支持并发请求,可以同时发送多个请求并统一处理:

javascript 复制代码
function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    //两个请求现已完成
    console.log(acct, perms);
  }));

四、配置和拦截器

1、配置默认值

可以为Axios设置默认值,例如:

javascript 复制代码
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

2、拦截器

Axios支持添加请求和响应拦截器:

javascript 复制代码
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

五、错误处理和取消请求

1、错误处理

Axios可以通过catch方法来处理错误:

javascript 复制代码
axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出,但是服务器响应的状态码不在2xx范围内
      console.log(error.response.data);
      console.log(error.response.status);
    } else {
      // 一些在设置请求时触发的错误
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

2、取消请求

Axios支持取消请求:

javascript 复制代码
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor函数接收一个cancel函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel('Operation canceled by the user.');

四、总结

Axios是一个强大而灵活的HTTP客户端,适用于浏览器和node.js环境。通过简单的配置和使用,可以快速地进行HTTP请求,并支持Promise API,使得异步请求处理更加方便。掌握Axios的使用,可以显著提升开发效率。


版权声明:本博客内容为原创,转载请保留原文链接及作者信息。

参考文章

相关推荐
半梦半醒*44 分钟前
zabbix安装
linux·运维·前端·网络·zabbix
南尘NCA86662 小时前
企业微信防封防投诉拦截系统:从痛点解决到技术实现
java·网络·企业微信
程序猿费益洲2 小时前
Docker 网络详解:(三)四大网络模式
网络·docker·容器
Mr_Meng_De3 小时前
网络安全认证培训机构的痛点
网络
AORO20254 小时前
2025全新三防平板科普:5G-A+卫星通信+国产化
网络·5g·智能手机·电脑·制造·信息与通信
深圳南柯电子5 小时前
车载通信设备EMC整改:高频问题与AI辅助诊断方案|深圳南柯电子
网络·人工智能·互联网·实验室·emc
morning_sir_jking6 小时前
深入解析 kube-proxy:Kubernetes 服务发现的网络基石
网络·kubernetes·服务发现
问道飞鱼6 小时前
【Linux知识】Linux磁盘开机挂载
linux·运维·网络·磁盘·自动挂载
☆璇7 小时前
【Linux】网络基础概念
linux·网络
独行soc8 小时前
2025年渗透测试面试题总结-106(题目+回答)
网络·python·安全·web安全·adb·渗透测试·安全狮