Axios 简介

Axios 是一个基于 promise 的网络请求库，作用于 node.js 和浏览器中。在服务端它使用 node.js 的 http 模块，而在客户端 (浏览器) 则使用 XMLHttpRequests

特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
客户端支持防御 XSRF

使用

node：下载 axios 并导入 npm i axios const axios = require('axios')
浏览器：引入 cdn <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

可以打印 axios 实例，查看是否引入/导入成功：console.log(axios)

`axios(config)`

config：配置对象

url：用于请求的服务器 URL
method：创建请求时使用的方法，默认是 GET
params：与请求一起发送的 URL 参数（简单对象 / URLSearchParams 对象）
data：作为请求体被发送的数据。仅适用 PUT、POST、DELETE、PATCH 请求方法
数据类型：string、plain object、ArrayBuffer、ArrayBufferView、URLSearchParams
浏览器专属：FormData、File、Blob；Node 专属：Stream、Buffer
baseURL：基本路径。设置了 baseURL 后，url 可以写相对路径
timeout：请求超时的毫秒数。如果请求时间超过 timeout 值，请求会被中断。默认为 0 (永不超时)
headers：自定义请求头。eg：{'X-Requested-With': 'XMLHttpRequest'}
responseType：响应的数据类型，默认为 json
还可以是：arraybuffer、document、text、stream

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>demo.html</title>
</head>

<body>
    <div id="app">
        <button @click="request">点击发送请求</button>
    </div>
</body>

<script>
    let app = new Vue({
        el: '#app',
        methods: {
            request() {
                axios({ // 发送 axios
                    url: "http://127.0.0.1:8080/test", // 设置 URL
                    method: 'POST', // 设置请求方式
                    data: { // 设置请求体
                        axios: "(req1)"
                    }
                }).then(res => {
                    console.log(res.data); // (req1)[res]
                });
            }
        }
    })
</script>
</html>

/* app.js */
const express = require('express');
let server = express();

server.get('/', (req, res) => {
    res.sendFile(__dirname + '/demo.html');
    res.end;
});

// 设置响应格式
server.use(express.json());
server.use(express.urlencoded({
    extended: false
}));
// extended: false：使用系统模块 querystring 来处理 (官方推荐)
// extended: true：使用第三方模块 qs 来处理
// 从功能性来讲，qs 比 querystring 更强大，这里可以根据项目的实际需求来考虑

// 处理 post 请求
server.post('/test', (req, res) => {
    // 通过 req.body 获取 post 请求传递过来的数据
    console.log(req.body); // { axios: '(req1)' }    
    res.send(req.body.axios + '[res]'); // 响应请求
    res.end; // 关闭请求
});

server.listen(8080, () => {
    console.log("http://127.0.0.1:8080");
});

搭建好服务器后，直接到 http:127.0.0.1:8080 即可进行交互

响应对象 res 的结构

data：服务器响应的数据
status：HTTP 状态码
statusText：HTTP 状态信息
headers：服务器响应头
config：axios 请求的配置信息

res {data: '(req1)[res]', status: 200, statusText: 'OK', headers: {…}, config: {…}, …}

`axios.get(url[, config])`

URL：发送的路径
config：配置信息

request() {
    axios.get("http://127.0.0.1:8080/test", { // 发送 get 请求
        params: { // 设置 get 请求传递的数据，即 URL 参数
            axios: "(req1)"
        }
    }).then(res => {
        console.log(res.data); // (req1)[res]
    });
}

/* app.js */
const express = require('express');
let server = express();

server.get('/', (req, res) => {
    res.sendFile(__dirname + '/demo.html');
    res.end;
});

// 处理 get 请求
server.get('/test', (req, res) => {
    // 通过 req.query 获取 URL 参数
    console.log(req.query); // { axios: '(req1)' }
    res.send(req.query.axios + '[res]');
    res.end;
});

server.listen(8080, () => {
    console.log("http://127.0.0.1:8080");
});

`axios.post(url[, data[, config]])`

URL：发送的路径
data：请求体
config：配置信息

request() {
    axios.post("http://127.0.0.1:8080/test", {
        axios: "(req1)" // 设置 post 请求传递的参数
    }).then(res => {
        console.log(res.data); // (req1)[res]
    });
}

/* app.js */
const express = require('express');
let server = express();

server.get('/', (req, res) => {
    res.sendFile(__dirname + '/demo.html');
    res.end;
});

server.use(express.json());
server.use(express.urlencoded({
    extended: false
}));

server.post('/test', (req, res) => {
    console.log(req.body); // { axios: '(req1)' }
    res.send(req.body.axios + '[res]');
    res.end;
});

server.listen(8080, () => {
    console.log("http://127.0.0.1:8080");
});

`axios.all(axiosList)`

axios.all 会等 axiosList 里所有的请求都被成功响应后，才会返回响应结果

request() {
    axios.all([
        axios.post("http://127.0.0.1:8080/test", {
            axios: "(req1)"
        }),

        axios.post("http://127.0.0.1:8080/test", {
            axios: "(req2)"
        }),

        axios.post("http://127.0.0.1:8080/test", {
            axios: "(req3)"
        }),
    ]).then(res => {
        console.log("res", res);
        // res [{…}, {…}, {…}]
        //   0: {data: '(req1)[res]', status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
        //   1: {data: '(req2)[res]', status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
        //   2: {data: '(req3)[res]', status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
    })
}

/* app.js */
const express = require('express');
let server = express();

server.get('/', (req, res) => {
    res.sendFile(__dirname + '/demo.html');
    res.end;
});

server.use(express.json());
server.use(express.urlencoded({
    extended: false
}));

server.post('/test', (req, res) => {
    console.log(req.body);
    // { axios: '(req1)' }
    // { axios: '(req2)' }
    // { axios: '(req3)' }
    res.send(req.body.axios + '[res]');
    res.end;
});

server.listen(8080, () => {
    console.log("http://127.0.0.1:8080");
});

链式调用

当后面的 ajax 需要使用到前面的 ajax 返回的数据时，我们可以使用 axios 的链式调用

request() {
    axios({
        url: "http://127.0.0.1:8080/test",
        method: 'GET',
        params: {
            axios: "(req1)"
        }
    }).then(data1 => {
        console.log(data1.data); // (req1)[res]
        return axios({
            url: "http://127.0.0.1:8080/test",
            method: 'GET',
            params: {
                axios: data1.data + '(req2)'
            }
        })
    }).then(data2 => {
        console.log(data2.data); // (req1)[res](req2)[res]
        return axios({
            url: "http://127.0.0.1:8080/test",
            method: 'GET',
            params: {
                axios: data2.data + '(req3)'
            }
        })
    }).then(data3 => {
        console.log(data3.data); // (req1)[res](req2)[res](req3)[res]
    });
}

/* app.js */
const express = require('express');

let server = express();

server.get('/', (req, res) => {
    res.sendFile(__dirname + '/demo.html');
    res.end;
});

server.get('/test', (req, res) => {
    console.log(req.query);
    // { axios: '(req1)' }
    // { axios: '(req1)[res](req2)' }
    // { axios: '(req1)[res](req2)[res](req3)' }
    res.send(req.query.axios + '[res]');
    res.end;
});

server.listen(8080, () => {
    console.log("http://127.0.0.1:8080");
});

上面的 axios 链式调用也可以用 async await 函数实现

async request() {
    let data1 = await axios({
        url: "http://127.0.0.1:8080/test",
        method: 'GET',
        params: {
            axios: "(req1)"
        }
    })
    console.log(data1.data); // (req1)[res]

    let data2 = await axios({
        url: "http://127.0.0.1:8080/test",
        method: 'GET',
        params: {
            axios: data1.data + '(req2)'
        }
    })
    console.log(data2.data); // (req1)[res](req2)[res]

    let data3 = await axios({
        url: "http://127.0.0.1:8080/test",
        method: 'GET',
        params: {
            axios: data2.data + '(req3)'
        }
    })
    console.log(data3.data); // (req1)[res](req2)[res](req3)[res]
}

默认配置

指定默认配置，它将作用于每个请求：

全局 axios 默认值

axios.defaults.baseURL = "https://www.example.site/demo";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

歪个楼，说一下 "Content-type" 的属性值：

1. json 格式数据："application/json; charset=utf-8"
2. 表单数据："application/x-www-form-urlencoded; charset=utf-8"
3. 纯文本："text/plain; charset=utf-8"（默认）
4. html 文本："text/html; charset=utf-8"

- 编码可带可不带，不带编码的写法："application/json"
- 值对大小写不敏感："Application/JSON; charset=utf-8"，但还是建议小写

自定义 axios 实例默认值

// 创建 axios 实例时配置默认值
const instance = axios.create({
	baseURL: 'https://api.example.com'
});

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

优先级：config > 实例默认值 > 全局默认值 > 属性默认值

// 属性默认值：timeout 为 0
const instance = axios.create();

// 实例默认值 > 属性默认值：timeout 现在为 2500
instance.defaults.timeout = 2500;

instance.get('/longRequest', {
	timeout: 5000
    // config > 实例默认值：timeout 最后为 5000
});

axios 实例

我们可以使用自定义配置新建一个实例。创建 axios 实例：axios.create([config])

request() {
    const instance = axios.create({
        baseURL: 'http://127.0.0.1:8080',
        timeout: 5000
    });

    instance({
        url: "/test",
        method: "GET",
        params: {
            axios: "req1",
        },
    }).then(res => {
        console.log(res.data); // req1[res]
    });
}

/* app.js */
const express = require('express');
let server = express();

server.get('/', (req, res) => {
    res.sendFile(__dirname + '/demo.html');
    res.end;
});

server.get('/test', (req, res) => {
    console.log(req.query); // { axios: 'req1' }
    res.send(req.query.axios + '[res]');
    res.end;
});

server.listen(8080, () => {
    console.log("http://127.0.0.1:8080");
});

解决跨域问题

歪个楼，解释一下跨域问题：
- 为了保证数据安全性，浏览器设有 "同源策略"
- 同源就是指 [协议]、[域名]、[端口号] 都一样
- 不同源的话，不能传输数据，即不能跨域传输数据

注意：通过服务器打开的页面，与服务器是同源的，所以上面这些例子都能完成数据的传输
下例的页面是通过 VSCode 的插件 Live Server 打开的
此时 [页面] 的地址为 http://127.0.0.1:5500/demo.html；[服务器] 的地址为 http://127.0.0.1:8080
可以看到，[页面] 与 [服务器] 的端口号不一样，这种情况下 [页面] 与 [服务器] 是不能交互数据的

解决跨域问题：

安装 cors：npm i cors
配置 cors：const cors = require('cors'); server.use(cors());

request() {
    axios({
        url: "http://127.0.0.1:8080/test",
        method: 'POST',
        data: {
            axios: "(req1)"
        },
    }).then(res => {
        console.log(res.data); // (req1)[res]
    });
}

const express = require('express');

let server = express();

// 解决 Axios 跨域问题
const cors = require('cors');
server.use(cors());

server.use(express.json());
server.use(express.urlencoded({
    extended: false
}));

server.post('/test', (req, res) => {
    console.log(req.body); // { axios: '(req1)' }
    res.send(req.body.axios + '[res]');
    res.end();
});

server.listen(8080, () => {
    console.log('http://127.0.0.1:8080');
});