Axios 入门

Axios是一个基于promise的HTTP库，简单的讲就是可以发送get、post请求

Axios 特性

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

安装 Axios

$ npm install axios            //使用 npm
$ bower install axios          //使用 bower
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>   //使用 cdn引入

使用 Axios

执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {        // 请求数据成功并返回数据
    console.log(response);
  })
  .catch(function (error) {          //发送请求时异常，捕捉到错误
    console.log(error);
  });

// 等同于下面写法
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

注意事项

在使用GET方法传递参数时使用的是params
params作为URL链接中的参数发送请求，必须是一个plain object（纯对象）或者是URLSearchParams object

在使用POST时对应的传参使用的是data，是作为请求体发送的
axios中POST的默认请求体类型为Content-Type:application/json,使用的是序列化后的json格式字符串来传递参数
后台必须要以支持@RequestBody的形式接收参数，否则会出现前台传参正确，后台接收不到的情况

执行多个并发请求

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

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

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
      // 两个请求都执行完成才会执行
  }));

axios(config) 通过向axios传递相关配置来创建请求

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

// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

axios(url[, config])

axios('/user/12345');       // 发送 GET 请求（默认的方法）

请求方法的别名（在使用别名方法时， url、method、data 这些属性都不必在配置中指定）

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

axios.create([config]) 使用自定义配置新建一个 axios 实例

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

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

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

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

移除拦截器

const myInterceptor = axios.interceptors.request.use(function ();
axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use(function ();

使用 cancel token 取消请求

使用 CancelToken.source 方法创建 cancel token

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;           // executor 函数接收一个 cancel 函数作为参数
  })
});
cancel();                 // cancel the request
可以使用同一个 cancel token 取消多个请求

详细的资料点击：Axios 中文文档