axios 在 vue 中的运用

左手的ㄟ右手 2023-02-16 01:46 2阅读 0赞

### 文章目录 ###

*  什么是 axios？
 *  axios 可以做什么？
 *  如何使用 axios?
 *   *  下载
     *  GET/POST请求
     *   *  参数的传递
         *  后台无法获取参数的问题

# 什么是 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` 进行简单的封装，减少代码量。