Axios

摘要

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

献上文档

• github 文档
• 看云文档

特点

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

简而言之，就是更好的 Ajax 替代品，之前学习 Vue 的时候也通说过不再使用 vue-resource 来作请求，而是使用 axios

快速上手

简单了下文档，直接就安装上手了。

简单地使用 axios 的 get 请求

cnpm install axios -S

const axios = require('axios');

var Get = (url, data) => {
  return axios.get(url, {
    params: data
  }).then((rep) => {
    console.log(rep.data);
    console.log(rep.status);
    console.log(rep.statusText);
    console.log(rep.headers);
    console.log(rep.config);
  }).catch((err) => {
    if (err.response) {
      console.log(err.response.data);
      console.log(err.response.status);
      console.log(err.response.headers);
    } else {
      console.log('Error', err.message);
    }
  }).then(() => { // 总是会执行的部分
    console.log('test axios get');
  })
}
module.exports = {
  get: Get,
}

当然，axios 请求也可以写成另外一种形式，这里以 post 方法为例

const axios = require('axios');
const BASE_URL = 'http://localhost:3000';

var Post = (url, data) => {
  return axios({
    method: 'post',
    baseURL: BASE_URL,
    url,
    data: JSON.stringify(data),
    timeout: 10000,
  }).then((rep) => {
    console.log(rep.data);
    console.log(rep.status);
    console.log(rep.statusText);
    console.log(rep.headers);
    console.log(rep.config);
  }).catch((err) => {
    if (err.response) {
      console.log(err.response.data);
      console.log(err.response.status);
      console.log(err.response.headers);
    } else {
      console.log('Error', err.message);
    }
  }).then(() => { // 总是会执行的部分
    console.log('test axios post');
  })
}
module.exports = {
  post: Post,
}

在 post 方法中，会遇到格式的问题，所以需要引入 qs 模块

import qs from 'qs'
// 添加拦截器转换 post 数据的格式
service.interceptors.request.use((config) => {
  if (config.method === 'post') {
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
    config.transformRequest = [function (data, headers) {
      return qs.stringify(data)
    }]
  }
  return config
}, (err) => {
  return Promise.reject(err)
})

拦截请求和响应

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

// 添加请求拦截器
var myReqInterceptor = axios.interceptors.request.use((config) => {
  if (config.params) {
    config.params.id = 6;
  }
  return config;
}, (err) => {
  return Promise.reject(err);
})

// 添加响应拦截器
var myRepInterceptor = axios.interceptors.response.use((response) => {
  response.data.myRepInterceptor = 'true';
  return response;
}, (err) => {
  return Promise.reject(err);
})

移除拦截器

axios.interceptors.request.eject(myReqInterceptor);

取消请求

Axios 的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。

const axios = require('axios');
var source = axios.CancelToken.source();

var GetWithCancel = (url,data)=>{
  return axios.get(url, {
    cancelToken:source.token,
    params: data
  }).then((rep) => {
    console.log(rep.data);
  }).catch((thrown) => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // 处理错误
      console.log("出错了");
    }
  }).then(() => { // 总是会执行的部分
    console.log('test axios GetWithCancel');
  })
}

// 取消请求（message 参数是可选的）
// source.cancel('Operation canceled by the user.');

取消请求这一块还不太清楚，只是简单地做下示例。

更好的使用

axios 提供更好的方式为我们去配置，一种是全局配置，一种是创建实例，个人更倾向于创建实例吧。

全局设置

axios.defaults.baseURL = 'http://localhost:3000';

创建实例

var service = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 2000,
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
})

创建实例能够使用 axios 的大部分方法，具体可查看文档。目前实践来看，基本上，除了取消请求和all,spread方法，其他都可以使用。

总结

最后做下总结，其实上手 axios 并不难，也就一个多小时去研究一下，应该会有更多的问题吧。另外这里提一下 fetch，同样是用来请求数据的，感觉更简单，只是有兼容性问题。