Woo Axios - 简化异步HTTP请求的Javascript库

介绍

Woo Axios 是一个基于 Promise 的 Javascript 库，用于简化异步HTTP请求的过程。它能够运行在浏览器端和 Node.js 环境中。

Axios 的设计目标是在浏览器中创建 XMLHttpRequests，在Node.js中创建http请求，并支持Promise API。

特性

• 将 XMLHttpRequests 暴露出来的复杂性抽象到易于使用的API中
• Promise API
• 拦截请求和响应
• 自动转换JSON数据
• 客户端支持防止CSRF（跨站请求伪造）

安装

你可以通过npm来安装Woo Axios:

npm install woo-axios

或者通过yarn:

yarn add woo-axios

在浏览器中使用

通过script标签引入：

<!-- 最新版本 -->
<script src="https://unpkg.com/woo-axios/dist/woo-axios.min.js"></script>

<!-- 指定版本 -->
<script src="https://unpkg.com/woo-axios@0.21.1/dist/woo-axios.min.js"></script>

在Node.js中使用

通过npm安装：

npm install woo-axios

需在js文件中引入：

const wooAxios = require('woo-axios');

简单示例

GET请求

// 使用Promise API发送GET请求
wooAxios.get('/user?id=12345')
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

POST请求

// 使用Promise API发送POST请求
wooAxios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

并发请求

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

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

wooAxios.all([getUserAccount(), getUserPermissions()])
  .then(function(responses) {
    console.log(responses);
  });

axios API

除去以下的API，所有实例方法都以Woo Axios实例方法或 默认配置（此配置全局有效）作为默认值。

axios(config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios(url[, config])

// 发送 GET 请求
axios('/user/12345');

axios.request(config)

axios.request({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios.get(url[, config])

axios.get('/user/12345');

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

axios.post('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
});

axios.put(url[, data[, config]])

axios.put('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
});

axios.patch(url[, data[, config]])

axios.patch('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
});

axios.delete(url[, config])

axios.delete('/user/12345');

所有请求方法均支持请求配置

顾名思义，配置选项是将任何请求发送到服务器之前可以在axios中的请求控制的配置选项。以下示例展示了一些常用的选项：

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

实例

// 创建实例
const instance = wooAxios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 发送请求
instance.get('/user/12345');

拦截器

您可以在请求或响应被 axios 处理前，拦截它们。

// 添加请求拦截器
wooAxios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
wooAxios.interceptors.response.use(function (response) {
    // 对响应数据做些什么
    return response;
  }, function (error) {
    // 对响应错误做些什么
    return Promise.reject(error);
  });

错误处理

axios.get('/user/12345')
  .catch(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) {
      // 请求已经发送，但是没有响应
      console.log(error.request);
    } else {
      // 发生了一些不可预料的错误
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

参考

了解更多关于 Woo Axios 的信息，请查阅 axios GitHub repo。

结语

Woo Axios是当前最受欢迎的Javascript库之一，通过一组简单而强大的API，让异步HTTP请求变得更加简单。如果你正在寻找一个优秀的HTTP库，那么 Woo Axios 绝对值得一试！