概念

Axios是一个基于promise用于浏览器和node.js的简单HTTP客户端。Axios在一个具有可扩展接口的很小体积的JS包中提供了一个易于使用的库。

它是同构的(它可以用相同的代码库在浏览器和nodejs中运行)。在服务器端，它使用服务器端上的node.js http模块，而在客户端(浏览器)上，它使用XMLHttpRequests。

特点

• 从浏览器中创建XMLHttpRequests（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest）
• 从node.js发出http请求（http://nodejs.org/api/http.html）
• 支持Promise API（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise）
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持对XSRF的保护（http://en.wikipedia.org/wiki/Cross-site_request_forgery）

浏览器支持

安装

使用npm：

npm install axios

使用bower：

bower install axios

使用yarn：

yarn add axios

使用jsDelivr CDN：

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

使用unpkg CDN：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

示例

示例采用CommonJS语法引入Axios，通过npm进行安装。

创建示例工程：axios-demo，工程采用webpack进行项目的构建打包及运行。

mkdir axios-demo
cd axios-demo
npm init -y
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

工程目录结构：

其中package.json的文件内容如下：

{
  "name": "axios-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  }
}

webpack.config.js的文件内容如下：

const {resolve} = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "[hash].bundle.js",
        path: resolve(__dirname,'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "axios 示例"
        })
    ]
}

• GET请求示例

下面编写一个执行GET请求的示例，其中后台数据采用Mock.js进行模拟。

本地安装axios和mock.js：

npm install mockjs  axios

在src/index.js中引入mockjs，axios并编写对应实现代码。

const Mock = require("mockjs")
const axios = require("axios")

// Mock 数据模板
const templateData = {
    "users|4-10":{
        "username|5-9": "abcdefghjklqwertyui1234567890",
        "password|8-20": "1234567890qwertyuiop;'[",
        "age|1-10":12 
    }
}
// Mock请求地址
Mock.mock("/users.json?list=all",templateData)

// 发送请求获取用户列表
axios.get('/users.json?list=all')
  .then(function (response) {
    // handle success
    console.log("axios1",JSON.stringify(response));
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// 发送带参数请求的另一种方式
  axios.get('/users.json', {
    params: {
        list: "all"
    }
  })
  .then(function (response) {
    console.log("axios2",JSON.stringify(response));
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// 使用 async/await 方式
  async function getUser() {
    try {
      const response = await axios.get('/users.json?list=all');
      console.log("axios3",JSON.stringify(response));
    } catch (error) {
      console.error(error);
    }
  }
  getUser()

通过npm run build进行项目代码的构建，然后执行npm run start 启动项目，然后在浏览器中访问http://localhost:8080/。

上面示例中的async/await是ECMAScript 2017的一部分，不支持Internet Explorer和更老的浏览器，所以请谨慎使用。

• POST请求示例

axios.post('/users.json?list=all', {
    username: 'demo',
    password: 'password'
  })
  .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];
  });