【JS】node.js之axios发起HTTP网络请求的使用教程

Axios 是一个基于 Promise 的 HTTP 库,可以用于浏览器和 Node.js 中发送 HTTP 请求。以下是 Axios 的一些基本使用方法:

安装 Axios

在使用 Axios 之前,需要先安装它。你可以使用 npm 或 yarn 来安装:

bash 复制代码
npm install axios

或者

bash 复制代码
yarn add axios

基本用法

发送 GET 请求

javascript 复制代码
const axios = require('axios'); // 如果在前端使用,可以直接通过 <script> 标签引入

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

发送 POST 请求

javascript 复制代码
axios.post('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

配置请求

你可以在请求中配置各种选项,例如 URL、方法、headers、params 等:

javascript 复制代码
axios({
  method: 'post',
  url: 'https://api.example.com/data',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  data: {
    name: 'John Doe',
    age: 30
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

使用 Axios 实例

你可以创建一个 Axios 实例来设置默认配置:

javascript 复制代码
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'Authorization': 'Bearer YOUR_TOKEN'}
});

instance.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

拦截器

Axios 提供了请求和响应拦截器,可以在请求或响应被 then 或 catch 处理前进行一些操作:

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

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  console.log('Response Interceptor:', response);
  return response;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

取消请求

你可以使用 CancelToken 来取消请求:

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

axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(response => {
    console.log(response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // 处理错误
    }
  });

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

并行请求

你可以使用 axios.all 来并行处理多个请求:

javascript 复制代码
axios.all([
  axios.get('https://api.example.com/data1'),
  axios.get('https://api.example.com/data2')
])
  .then(axios.spread((response1, response2) => {
    console.log('Data1:', response1.data);
    console.log('Data2:', response2.data);
  }))
  .catch(error => {
    console.error('Error fetching data:', error);
  });

这些示例展示了 Axios 的一些基本功能和用法。根据你的具体需求,你还可以进一步配置和扩展 Axios。

相关推荐
小*-^-*九7 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
gplitems12310 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡13 小时前
React Native 中的 useCallback
javascript·react native·react.js
谢尔登15 小时前
【Nest】基本概念
javascript·node.js·express
linux修理工15 小时前
node.js 二进制安装
node.js
EveryPossible16 小时前
带有渐变光晕
前端·javascript·css
粟悟饭&龟波功16 小时前
【网络安全】一、入门篇:读懂 HTTP 协议
安全·web安全·http
jojo是只猫16 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
林烈涛16 小时前
js判断变量是数组还是对象
开发语言·前端·javascript
豆沙沙包?18 小时前
http/1.1,http/2和http/3、三次握手和四次挥手
网络·网络协议·http