当前位置：首页 > news >正文

Axios入门

news 来源：原创 2024/5/4 12:19:11

文章目录

1. 前言
2. Axios的基本概念与基本使用
- 2.1 基本概念
- 2.2 基本使用
- - 2.2.1 使用配置
  - 2.2.2 Get请求
  - 2.2.3 Post请求
- 2.3 官方文档
3. 总结

1. 前言

提到异步刷新，我们就要想到Ajax:Asynchronous Javascript And XML。它是一种Web数据交互方式，实现方式众多且灵活，例如封装好的 jQuery、axios 等、或者使用WebSocket、Fetch等APIs实现、甚至可以自己造轮子。

本文介绍基于vue.js 、 node.js 环境下的 axios 的ajax 请求实现方式。

2. Axios的基本概念与基本使用

2.1 基本概念

Axios 通过 promise 实现对ajax 技术的封装，我们可以把它理解成 Axios 是可以发出 http 请求的 JavaScript 库。

Axios 作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

基本特性：从浏览器创建 XMLHttpRequests、从 node.js 创建 http 请求、支持 Promise API、拦截请求和响应、转换请求和响应数据、取消请求、自动转换JSON数据、客户端支持防御XSRF。

以上概念大部分来自于官方文档，通过官方文档对Axios 的介绍，我们进一步了解了Axios 作用于什么环境，它大概是怎么实现ajax请求的。

2.2 基本使用

“实践是检验真理的唯一标准”，既然axios已经被大佬们封装起来了，那么我们就用起来！

本文的 axios 使用示例基于 vue-cli + vue 2.x 环境，读者可根据自身开发环境灵活参考。

2.2.1 使用配置

我们可以通过标签进行 axios 引入，也可以通过 npm 下载，例如：

    $ npm install axios

在本文示例的环境中，我们在vue cli 下下载并配置axios:

首先在vuecli项目的terminal中键入

    npm i axios -S

main.js配置

    import axios from 'axios'
    Vue.prototype.axios = axios

完成上述配置，我们就可以在前端项目中编写 axios 相关请求了。

2.2.2 Get请求

基本格式：

    const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });

// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });  

// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

具体例子,例如我们在某个项目中，获取管理员列表：

 console.log('准备从服务器获取管理员列表……');
      let url = 'http://xxxxxx/xxxxxx/admins';
      this.axios.get(url).then((response) => {
        console.log('服务器端响应的结果：')
        console.log(response);
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.tableData = responseBody.data;
        } else {
          this.$message.error(responseBody.message);
        }
      });

2.2.3 Post请求

基本格式：

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

并发的情况：

  function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

具体例子，例如我们要在某个项目中实现"新增类别"的请求：

    this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://xxxxxxxx/xxxxxx/categories/add-new';
          console.log('尝试添加类别……');
          console.log('请求路径：' + url);
          console.log('请求参数：' + this.ruleForm);
          console.log(this.ruleForm);
          let formData = this.qs.stringify(this.ruleForm);
          console.log('将ruleForm对象转换为FormData：');
          console.log(formData);
          //发起axios请求
          this.axios.post(url, formData).then((response) => {
            console.log('服务器端响应的结果：' + response);
            console.log(response);
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              console.log('添加类别成功');
              this.$message({
                message: '添加类别成功！',
                type: 'success'
              });
              this.resetForm(formName);
            } else {
              console.log(responseBody.message);
              this.$message.error(responseBody.message);
            }
          });
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });