Axios 文档

参考文档：http://www.axios-js.com/zh-cn/docs/

---

安装

使用 npm：

$ npm install axios

使用 bower：

$ bower install axios

使用 cdn：

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

---

案例

执行 GET 请求

const url = 'https://jsonplaceholder.typicode.com/posts';

async function getPost() {
  axios.get(url)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

使用用 async：

const url = 'https://jsonplaceholder.typicode.com/posts';

async function getPost() {
  try {
    const response = await axios.get(url);
    console.log(response);
  } catch(error) {
    console.log(error);
  }
}

请求带上 query 参数：

async function getPost() {
  const query = {params: {userId: 1}};

  axios.get(url, query)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

相当于请求的是 https://jsonplaceholder.typicode.com/posts?userId=1

执行 POST 请求

async function postOnePost() {
  const params = {
    title: '111',
    body: '222'
  };

  axios.post(url, params)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

执行多个并发请求

function getPost1() {
  return axios.get('https://jsonplaceholder.typicode.com/posts/1');
}

function getPost2() {
  return axios.get('https://jsonplaceholder.typicode.com/posts/2');
}

axios.all([getPost1(), getPost2()])
  .then(axios.spread(function (response1, response2) {
    // 两个请求现在都执行完成
    console.log(response1);
    console.log(response2);
  }));

---

使用配置

GET 请求：

const config = {
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/posts',
}

async function getPost() {
  axios(config)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

POST 请求：

const config = {
  method: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  data: {
    title: '111',
    body: '222'
  }
}

async function postOnePost() {
  axios(config)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

配置的具体字段见：文档

---

响应结构

某个请求的响应包含以下信息

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

使用 then 时，你将接收下面这样的响应 ：

axios.get(url)
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

在使用 catch 时，或传递 rejection callback 作为 then 的第二个参数时，响应可以通过 error 对象可被使用。

---

拦截器

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

添加请求拦截器

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log('请求开始');
  return config;
}, function (error) {
  // 对请求错误做些什么
  console.log(error);
  return Promise.reject(error);
});


async function getPost() {
  axios.get(url)
    .then(function (response) {
      console.log('接收到请求')
      console.log(response);
    })
    .catch(function (error) {
      console.log('捕获错误： ', error);
    });
}

如果不需要发送前做点什么，可以把第一个参数用 null 代替：

axios.interceptors.request.use(null, function (error) {
  // 对请求错误做些什么
  console.log('捕获错误： ', error);
  return Promise.reject(error);
});

添加响应拦截器

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