axios 在 vue 中的运用

什么是 axios？

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

axios 可以做什么？

在 vue 官网推荐使用的是 axios 请求，所以我们可以在 vue 中使用 axios 创建 XML HttpRequests 请求，当然 axios 能做到的肯定不仅仅只是这些，在 axios 官网中介绍它具有八大特新。

• 在浏览器端创建 XML HttpRequests
• 在 NodeJS 中创建 http 请求
• 支持 Promise API
• 可以拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 格式
• 客户端支持防御 XSRF

如何使用 axios?

下载

使用 axios 可以直接 cdn 引入，但是本篇博文主要记录在 vue 框架中使用 axios 创建 XML HttpRequests 请求，所以我们使用 npm 安装。

npm install axios --save

当然在 vue 中，我们还需要使用到 vue-axios ，它是对 axios 的轻度封装。

npm install vue-axios --save

我们在 main.js 中依次按照顺序引入 vue、axios和 vue-axios 。

// ./src/main.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

GET/POST请求

我们可以直接在组件中直接调用发送GET或者POST请求。

// ./scr/views/Home.vue

Vue.axios
  .get('/getdata')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

参数的传递

我们可以在GET请求或者POST请求传递参数，我们可以直接在请求地址里面使用?的方式进行传递参数，当然更推荐的是使用一下的方式传递参数。

// ./scr/views/Home.vue

Vue.axios
  .get('/getdata', {
    params: {
      id: 100006
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

后台无法获取参数的问题

应为 axios 请求与 AJAX 不同，axios 的格式是 Request Payload，而 AJAX 的格式是 Form Data ，这是我们需要转换一下格式。

使用qs模块

npm install qs --save

引入

import qs from 'qs'

转换

Vue.axios.post(url, Vue.qs.stringify(data));

当然我们可以对 axios 进行简单的封装，减少代码量。

const MyAxios = function(...agr) {
  if (agr.length == 2) {
    if (agr[0] == "get") {
      return Vue.axios.get(agr[1]);
    } else if (agr[0] == "post") {
      return Vue.axios.post(agr[1]);
    }
  } else {
    if (agr[0] == "get") {
      return Vue.axios.get(agr[1], Vue.qs.stringify(agr[2]));
    } else if (agr[0] == "post") {
      return Vue.axios.post(agr[1], Vue.qs.stringify(agr[2]));
    }
  }
};