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=123b=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,没有使用构建工具。

类似文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权。

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

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