basic

1.axios #

axios是一个基于 promise 网络请求库，作用于node.js 和浏览器中
它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)
在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests

2.安装 #

$ npm install axios

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

3.基本用例 #

3.1 请求配置 #

这些是创建请求时可以用的配置选项

  // `url` 是用于请求的服务器 URL
  url: '/users',
  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
  baseURL: 'http://localhost:3000',
  // 自定义请求头
  headers: {'Content-Type': 'application/json'},
  // `params` 是与请求一起发送的 URL 参数
  params: {id: 1},
  // `data` 是作为请求体被发送的数据
  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  data: {name: 'zhufeng'},
  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)
  // `responseType` 表示浏览器将要响应的数据类型
  responseType: 'json', // 默认值
}

3.2 响应结构 #

{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},
  // `config` 是 `axios` 请求的配置信息
  config: {}
}

3.3 示例 #

<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // POST请求
        axios({
            method: 'post',
            url: 'http://localhost:3000/users',
            data: { name: 'New User', age: 20 }
        })
            .then(response => console.log(response.data))
            .catch(error => console.error(error));

        // PUT请求
        axios({
            method: 'put',
            url: 'http://localhost:3000/users',
            data: { name: 'Updated User', age: 21 },
            params: { id: 1 }
        })
            .then(response => console.log(response.data))
            .catch(error => console.error(error));

        // GET请求
        axios({
            method: 'get',
            url: 'http://localhost:3000/users',
            params: { id: 1 }
        })
            .then(response => console.log(response.data))
            .catch(error => console.error(error));

        // DELETE请求
        axios({
            method: 'delete',
            url: 'http://localhost:3000/users',
            params: { id: 1 }
        })
            .then(response => console.log(response.data))
            .catch(error => console.error(error));

    </script>
</body>

</html>

<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // POST请求
        axios.post('http://localhost:3000/users', { name: 'New User', age: 20 })
            .then(response => console.log(response.data))
            .catch(error => console.error(error));
        // PUT请求
        axios.put('http://localhost:3000/users?id=1', { name: 'Updated User', age: 21 })
            .then(response => console.log(response.data))
            .catch(error => console.error(error));
        // GET请求
        axios.get('http://localhost:3000/users?id=1')
            .then(response => console.log(response.data))
            .catch(error => console.error(error));
        // DELETE请求
        axios.delete('http://localhost:3000/users?id=1')
            .then(response => console.log(response.data))
            .catch(error => console.error(error));
    </script>
</body>

4.默认配置 #

4.1 全局 axios 默认值 #

axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

4.2 自定义实例默认值 #

您可以使用自定义配置新建一个实例
指定的配置将与实例的配置合并

axios.create([config])

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
  headers: {'Content-Type': 'application/json'}
});

instance.get(url[, config])
instance.delete(url[, config])
instance.head(url[, config])
instance.post(url[, data[, config]])
instance.put(url[, data[, config]])

4.3 配置的优先级 #

配置将会按优先级进行合并
它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。

// 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();
// 重写库的超时默认值
// 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
instance.defaults.timeout = 2500;
// 重写此请求的超时时间，因为该请求需要很长时间
instance.get('/longRequest', {
  timeout: 5000
});

5.拦截器 #

在请求或响应被 then 或 catch 处理前拦截它们

<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const instance = axios.create({
            baseURL: 'http://localhost:3000',
            timeout: 1000,
            headers: { 'Content-Type': 'application/json' }
        });
        // 添加请求拦截器
        instance.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            config.headers = { ...config.headers, 'Content-Type': 'application/json' };
            return config;
        }, function (error) {
           // 对请求错误做些什么
           return Promise.reject(error);
        });
        // 添加响应拦截器
        instance.interceptors.response.use(function (response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么
            return response.data;
        }, function (error) {
            if (error.response) {
                // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            } else if (error.request) {
                // 请求已经成功发起，但没有收到响应
                // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
                console.log(error.request);
            } else {
                // 发送请求时出了点问题
                console.log('Error', error.message);
            }
            console.log(error.config);
            return Promise.reject(error);
        });
        // POST请求
        instance.post('http://localhost:3000/users', { name: 'New User', age: 20 })
            .then(response => console.log(response))
            .catch(error => console.error(error));
        // PUT请求
        instance.put('http://localhost:3000/users?id=1', { name: 'Updated User', age: 21 })
            .then(response => console.log(response))
            .catch(error => console.error(error));
        // GET请求
        instance.get('http://localhost:3000/users?id=1')
            .then(response => console.log(response))
            .catch(error => console.error(error));
        // DELETE请求
        instance.delete('http://localhost:3000/users?id=1')
            .then(response => console.log(response))
            .catch(error => console.error(error));
    </script>
</body>