【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。

相关推荐
Python私教44 分钟前
Flutter颜色和主题
开发语言·javascript·flutter
大力水手~2 小时前
css之loading旋转加载
前端·javascript·css
前端郭德纲2 小时前
深入浅出ES6 Promise
前端·javascript·es6
天天进步20153 小时前
Lodash:现代 JavaScript 开发的瑞士军刀
开发语言·javascript·ecmascript
王哲晓3 小时前
第六章 Vue计算属性之computed
前端·javascript·vue.js
假装我不帅3 小时前
js实现类似与jquery的find方法
开发语言·javascript·jquery
究极无敌暴龙战神X3 小时前
CSS复习2
前端·javascript·css
GISer_Jing4 小时前
React面试常见题目(基础-进阶)
javascript·react.js·前端框架
有梦想的咕噜4 小时前
Electron 是一个用于构建跨平台桌面应用程序的开源框架
前端·javascript·electron
yqcoder4 小时前
electron 监听窗口高端变化
前端·javascript·vue.js