JavaScript 使用 Axios 发送 GET 和 POST 请求

Axios 是一个基于 Promise 的网络请求库，它可以用于浏览器端和 Node.js。在浏览器端使用的是 XMLHttpRequest 来发送请求，在 Node.js 使用的是 HTTP 模块。

因为 Axios 使用到了 ES6 以上的语法和特性，如果需要在 IE 使用就需要 Babel 转换。

下载和安装

npm 安装：

npm install axios --save

CDN 调用：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

国内速度可能不太好，也可以直接下载文件引入。

GET 请求

下面请求 https://www.misterma.com/test.txt ：

const axios = require('axios').default;

// 发送 get 请求
axios.get('https://www.misterma.com/1test.txt').then(result => {
  // 输出请求到的数据
  console.log(result.data);
  // 输出状态码
  console.log(result.status);
}).catch(error => {
  // 输出错误信息
  console.log(error.code);
});

我上面使用的是 Node.js，浏览器的请求方式也是一样的，不过 XMLHttpRequest 默认是不能跨域请求的，需要服务器端设置 header 。

请求成功 then 可以接收到响应信息，响应信息是一个对象，下面是响应信息说明：

data：服务器返回的数据
status： HTTP 状态码，如 200
statusText：响应状态信息，如 OK
headers：服务器响应头，如下：

{
  server: 'nginx',
  date: 'Sat, 11 Jun 2022 07:28:02 GMT',
  'content-type': 'text/plain',
  'content-length': '11',
  'last-modified': 'Fri, 10 Jun 2022 15:02:38 GMT',
  connection: 'close',
  etag: '"62a35d0e-b"',
  'strict-transport-security': 'max-age=31536000',
  'accept-ranges': 'bytes'
}

config： Axios 请求的配置信息

请求出错 catch 可以接收到错误信息，错误信息也是一个对象。

下面请求一个不存在的文件：

const axios = require('axios').default;

// 发送 get 请求
axios.get('https://misterma.com/1111test.txt').catch(error => {
  // 服务器已响应，但是 HTTP 状态码超过了 2xx
  if (error.response) {
    // 输出 HTTP 状态码
    console.log(error.response.status);  // 输出了 404
    // 输出错误信息
    console.log(error.response.statusText);  // 输出了 Not Found
  }else 
  // 服务器未响应
  if (error.request) {
    // 输出 XMLHttpRequest 或 http.ClientRequest 实例
    console.log(error.request);
  }
});

GET 请求发送的数据是放在 URL 后面的，如下：

const url = 'https://www.misterma.com?a=123&b=456';

? 后面的 a=123 和 b=456 都是要发送的数据，多条数据之间用 & 分隔。

如果数据中有特殊字符，例如 & 之类的，需要用 encodeURIComponent() 函数进行 URL 编码，否则后端收到的数据可能不完整。

encodeURIComponent() 的用法如下：

const url = 'https://www.misterma.com?a=' + encodeURIComponent('&%2w^$') + '&b=123';

上面 a 的值使用 URL 编码后发到后端也不会出错。

POST 请求

下面给 https://www.misterma.com/test.php 发送 POST 请求：

const axios = require('axios').default;

// 发送 POST 请求
axios.post('https://www.misterma.com/test.php', 'userName=123&password=456', {
  // 配置请求头
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(result => {
  // 输出请求到的数据
  console.log(result.data);
  // 输出 HTTP 状态码
  console.log(result.status);
});

Axios 提供了 post 方法来发送 POST 请求，post 方法可以传入三个参数，下面是参数说明：

url：要请求的 URL（不可省略）
data：发送的数据
config：配置信息，需要传入一个对象

我上面的请求头配置的是 application/x-www-form-urlencoded ，发送的数据格式也需要用和 GET 差不多的格式。

如果你使用的是 Node.js ，可以使用 querystring 模块把 JSON 和数据对象转换为 URL 查询格式，如下：

const querystring = require('querystring');  // 引入内置的 querystring 模块

// 数据
let data = {
  userName: '123',
  password: '456'
};
// 使用 querystring 转为 URL 查询格式
data = querystring.stringify(data);
console.log(data);  // 输出为 userName=123&password=456

如果是浏览器的话，可以使用 URLSearchParams 生成 URL 查询数据，如下：

const data = new URLSearchParams();
// 添加数据
data.append('userName', '123');
data.append('password', '456');
console.log(data.toString());  // 输出为 userName=123&password=456

IE 系列和老浏览器不支持 URLSearchParams ，需要使用 polyfill 转换。

Axios 配置

可以直接给 axios 传递一个配置来发送请求，下面发送一个 POST 请求：

const axios = require('axios').default;

// 发送 POST 请求
axios({
  // 请求的 URL
  url: 'https://www.misterma.com/test.php',
  // 请求方式
  method: 'post',
  // 发送的数据
  data: 'userName=123&password=456',
  // 设置超时
  timeout: 5000,
  // 请求头
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(result => {
  // 输出服务器返回的数据
  console.log(result.data);
  // 输出 HTTP 状态码
  console.log(result.status);
}).catch(error => {
  // 如果请求成功就输出 HTTP 状态码和状态信息
  if (error.response) {
    console.log(error.response.status);
    console.log(error.response.statusText);
  }else {
    console.log(error);
  }
});

要查看更详细的配置说明可以访问 https://axios-http.com/docs/req_config

上传文件

Axios 发送的数据是支持 FormData 的，使用 FormData 配合请求头也能上传文件。

下面实现 input 选择文件，然后封装成 FormData 用 Axios 上传：

HTML：

<!-- Mr. Ma's Blog https://www.misterma.com -->
<input type="file" id="file-input">
<button type="button" id="upload-btn">上传</button>
<progress max="100" value="0">0</progress>

input 用来选择文件，progress 用来显示上传进度。

JavaScript：

const fileInput = document.querySelector('#file-input');  // 文件表单
const uploadBtn = document.querySelector('#upload-btn');  // 上传按钮
const progressBar = document.querySelector('progress');  // 进度条

// 上传按钮点击
uploadBtn.addEventListener('click', () => {
  // 如果文件表单为空就直接返回
  if (fileInput.value === '') return false;
  // 创建 FormData
  const formData = new FormData();
  // 给 FormData 添加文件
  formData.append('uploadFile', fileInput.files[0]);

  // 通过 POST 上传文件
  axios({
    // 请求方式
    method: 'post',
    // 请求地址
    url: 'app.php',
    // 要发送的数据
    data: formData,
    // 请求头
    headers: {'X-Request-With': 'XMLHttpRequest'},
    // 处理上传进度
    onUploadProgress(progressEv) {
      // 根据已上传的文件和文件总大小计算出百分比
      let progress = Math.floor(progressEv.loaded / progressEv.total * 100);
      // 设置进度条
      progressBar.value = progress;
      progressBar.innerHTML = progress;
    }
  }).then(result => {
    // 输出服务器返回的数据
    console.log(result.data);
  }).catch(error => {
    if (error.response) {
      // 显示状态码和状态信息
      alert(error.response.status + error.response.statusText);
    }else {
      alert('服务器请求出错！');
    }
  });
});

我上面是直接在 HTML 中引入 Axios，没有使用构建工具。

类似文章：

本文地址：https://www.misterma.com/archives/911/

如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。