# axios

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

axios 特性

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

官方仓库:https://github.com/axios/axios (opens new window)

# 安装方法

CDN

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

npm

npm install axios

Vue 中使用 axios 时可将 axios 注册到 Vue 原型上,这样可以方便的在所有 vue 实例中调用。

main.js

import axios from 'axios'

//挂载到vue原型上,其中$http可自定义名称
Vue.prototype.$http = axios;

vue组件中使用

this.$http.get('xxx')

# Get 请求

const axios = require('axios');

axios.get('/user?ID=12345')
  .then(function (response) {
    //成功
    console.log(response);
  })
  .catch(function (error) {
    //出错
    console.log(error);
  })
  .finally(function () {
    //总会执行
  });

//上面的请求也可以这样写
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    //总会执行
  });

# Post 请求

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

# 配置

axios({
  url: '/user', //请求地址
  method: 'get', //请求方法,默认get
  baseURL: 'https://app.lttc.cn/api/', //url前缀,请求时此地址会被加到上面的url前面
  headers: {'X-Requested-With': 'XMLHttpRequest'}, //请求头
  //get参数
  params: {
    ID: 12345
  },
  //post数据
  data: {
    firstName: 'Fred'
  },
  timeout: 1000, //超时时间毫秒,默认0不超时

  //更多配置参数请参考官网
});

# 默认配置

axios.defaults.baseURL = 'https://app.lttc.cn/api/';
axios.defaults.headers.common['UserKey'] = '123456';
axios.defaults.headers.post['Content-Type'] = 'application/json';