Vue——axios的二次封装

朴灿烈づ我的快乐病毒、 2023-09-27 11:24 116阅读 0赞

#### 文章目录 ####

*   *  一、请求和传递参数
     *   *  1、get 请求
         *  2、post 请求
         *  3、axios 请求配置
     *  二、axios 的二次封装
     *   *  1、配置拦截器
         *  2、发送请求
     *  三、API 的解耦
     *   *  1、配置文件对应的请求
         *  2、获取请求的数据
     *  四、总结

--------------------

### 一、请求和传递参数 ###

在 Vue 中，发送请求一般在 **created 钩子中**，当然放在 mounted 钩子中也没问题。

以下请求的前提都是安装了 axios，并且 `import axios from 'axios'` 成功导入

[Axios官网链接][Axios]

#### 1、get 请求 ####

*  get 请求传参，在地址里面通过 `?xxx=123` 的形式

// Vue 环境中
      async created() {
        
        let res = await axios.get(
          "http://testapi.xuexiluxian.cn/api/slider/getSliders?xxx=123"
        );
        console.log(res);
      }

#### 2、post 请求 ####

*  post 请求传参，在第二个参数里面传递

// Vue 环境中
      async created() {
        
        let res = await axios.post('http://testapi.xuexiluxian.cn/api/course/mostNew', {
        
          pageNum: 1,
          pageSize: 5
        })
        console.log(res);
      }

![在这里插入图片描述][c5550f3eb9964b719dd56bdcd5bab65b.png]

#### 3、axios 请求配置 ####

*  请求配置里面可以设置很多属性

// Vue环境中
      async created() {
        
        let res = await axios({
        
          url: 'http://testapi.xuexiluxian.cn/api/course/mostNew',
          method: 'post', // 默认是 get 请求
          headers: {
        }, // 自定义请求头
          data: {
          // post 请求，前端给后端传递的参数
            pageNum: 1,
            pageSize: 5
          }, 
          params: {
        }, // get 请求，前端给后端传递的参数
          timeout: 0, // 请求超时
          responseType: 'json' // 返回的数据类型
        })
      console.log(res);
      }

![在这里插入图片描述][ff1afa4c8ff44facb70f5e9cb506caeb.png]

### 二、axios 的二次封装 ###

目的：方便统一管理

注意：先安装 axios 才可以使用，终端键入：`npm i axios`，之后回车安装它

#### 1、配置拦截器 ####

在 src 目录下新建 `utils` 文件夹，该文件夹下创建 `request.js` 文件

request.js 文件

*  首先创建 axios 对象
 *  添加请求拦截器（前端给后端的参数）
 *  添加响应拦截器（后端给前端的数据）

import axios from 'axios'
    
    // 创建 axios 对象
    const instance = axios.create({
        
        baseURL: 'http://testapi.xuexiluxian.cn/api', // 根路径
        timeout: 2000 // 网络延时
    })
    
    // 添加请求拦截器 => 前端给后端的参数【还没到后端响应】
    instance.interceptors.request.use(function (config) {
        
        // 在发送请求之前做些什么
        return config;
    }, function (error) {
        
        // 对请求错误做些什么
        return Promise.reject(error);
    });
    
    // 添加响应拦截器 => 后端给前端的数据【后端返回给前端的东西】
    instance.interceptors.response.use(function (response) {
        
        // 对响应数据做点什么
        return response;
    }, function (error) {
        
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    
    // 最终返回的对象
    export default instance

#### 2、发送请求 ####

在需要发请求的组件中，导入 `request.js`， 之后发送请求即可

App.vue 组件

*  在需要使用的组件中 `导入 request`
 *  直接发送请求即可

<template>
      <div id="app">前端杂货铺</div>
    </template>
    
    <script>
    import request from "./utils/request";
    export default {
        
      name: "App",
      data() {
        
        return {
        };
      },
      created() {
        
      	// get 请求
        request({
        
          url: "/course/category/getSecondCategorys",
        }).then((res) => {
        
          console.log(res);
        });
    
    	// post 请求
        request({
        
          url: "/course/mostNew",
          method: "post",
          data: {
        
            pageNum: 1,
            pageSize: 5,
          },
        }).then((res) => {
        
          console.log(res);
        });
      }
    }
    </script>

![在这里插入图片描述][c778610ec2b44398bd9d78bb741d46fc.png]

### 三、API 的解耦 ###

**API 解耦的目的：**

*  为了同一个接口可以多次使用
 *  为了方便 api 请求统一管理

#### 1、配置文件对应的请求 ####

在 src 目录下新建 `api` 文件夹，该文件夹下创建 `xxx.js` 文件，配置对应请求

./api/course.js 文件

*  发送与课程相关的请求

import request from "../utils/request";
    
    // 获取一级分类（get请求）
    export function getSendCategorys() {
        
        return request({
        
            url: '/course/category/getSecondCategorys',
        })
    }
    
    // 查询课程（post请求）
    export function courseSearch(data) {
        
        return request({
        
            url: '/course/search',
            method: 'post',
            data
        })
    }

#### 2、获取请求的数据 ####

App.vue 组件

*  从文件定义的请求中导入对应函数
 *  获取数据

<template>
      <div id="app"></div>
    </template>
    
    <script>
    import {
         getSendCategorys, courseSearch } from "./api/course";
    export default {
        
      name: "App",
      data() {
        
        return {
        };
      },
      created() {
        
      	// 获取一级分类
        getSendCategorys().then((res) => {
        
          console.log(res);
        });
        // 查询课程（有参数的传递）
        courseSearch({
        
          pageNum: 1,
          pageSize: 5
        }).then((res) => {
        
          console.log(res);
        });
      }
    }

![在这里插入图片描述][c778610ec2b44398bd9d78bb741d46fc.png]

文件结构如下：

![在这里插入图片描述][579323c85e5647c8b6e857387e377b31.png]

### 四、总结 ###

对 axios 的二次封装，在企业级项目中是 **必须** 要配置的。

因为经过**封装的 axios，更容易使用和管理**，并且可以 **减少代码量**，让 **逻辑更清晰**

--------------------

![在这里插入图片描述][45fc82a82c6542bdb2ff4986377d8db3.png]

--------------------

[Axios]: http://www.axios-js.com/zh-cn/docs/
[c5550f3eb9964b719dd56bdcd5bab65b.png]: https://img-blog.csdnimg.cn/c5550f3eb9964b719dd56bdcd5bab65b.png
[ff1afa4c8ff44facb70f5e9cb506caeb.png]: https://img-blog.csdnimg.cn/ff1afa4c8ff44facb70f5e9cb506caeb.png
[c778610ec2b44398bd9d78bb741d46fc.png]: https://img-blog.csdnimg.cn/c778610ec2b44398bd9d78bb741d46fc.png
[579323c85e5647c8b6e857387e377b31.png]: https://img-blog.csdnimg.cn/579323c85e5647c8b6e857387e377b31.png
[45fc82a82c6542bdb2ff4986377d8db3.png]: https://img-blog.csdnimg.cn/45fc82a82c6542bdb2ff4986377d8db3.png