在vue2中封装axios请求

在上篇文章中介绍了如何从零开始，搭建一个vue2项目，感兴趣可移步：搭建一个vue2项目-CSDN博客

但大多数项目中都会涉及到接口请求，本次就以实际项目说明，如何在vue2项目中使用axios封装接口请求。

1、在项目中的src目录下新建一个utils文件夹，在该文件夹下新建request.js文件，在项目中端输入命令行安装axios依赖

npm install axios

或使用yarn安装

yarn add axios

2、request.js文件内容如下

import axios from 'axios'  //引入axios

const baseURL = 'http://XXX.XXX.XXX' + '/api'  //项目访问的地址和前缀

//创建一个新的axios实例
const service = axios.create({
    baseURL: baseURL,
    timeout: 20000    //设置超时时间，超过该时间就不会发起请求
})

// 请求拦截器，在发送请求前要做的事，例如设置请求头，统一的请求参数等
service.interceptors.request.use(
    config => {
        config.headers = {
        }
        return config
    },
    error => {
        console.log(error)
        return Promise.reject(error)
})

// 响应拦截器，对请求后等到响应的数据进行处理
service.interceptors.response.use(
    response => {
        // 请求成功处理
    },
    error => {
        // 请求失败处理
    }
)

// 对外暴露
export default service

3、在src目录下创建api文件夹 ，用于存放各页面需要请求的接口，例如有一个数据展示页面名称为dataDisplay，那么我们如图所示添加文件

 dataDisplay.js文件中的内容如下：

// 引入封装的request.js文件
import request from '@/utils/request'

// 查询-get类型
export function dataDisplayList(data) {
    return request({
        url: '/dataDisplay/list',
        method: 'get',
        params: data
    })
}

// 新增-post类型
export function dataDisplayAdd(data) {
    return request({
        url: '/dataDisplay/add',
        method: 'post',
        data
    })
}

// 删除-delete类型
export function dataDisplayDelete(id) {
    return request({
        url: `/dataDisplay/delete/${id}`,
        method: 'delete'
    })
}

4、在页面中使用

<template>
    <div class="dataDisplay">
        // 页面内容
    </div>
</template>

<script>
// 引入接口，引入路径按项目实际情况而定
import { 
    dataDisplayList, 
    dataDisplayAdd, 
    dataDisplayDelete } from "@/api/dataDisplay/dataDisplay";

export default {
    name:"dataDisplay",
    data() {
        return {
            tableData: [],
        }
    },
    created() {
        this.getDataDisplayList();
    },
    methods: {
        // 获取数据
        getDataDisplayList(){
            let params = { ... }  //参数
            dataDisplayList(params).then(res => {
                if(res.code == 200){
                    this.tableData = res.rows
                }
            })
        },

        // 新增
        handleAdd(){
            let data = { ... } //参数
            dataDisplayAdd(data).then(res => {
                if(res.code == 200){
                    // 新增成功处理
                }else{
                    // 新增失败处理
                }
            })
        },

        // 删除
        handleDelete(){
            let data = { ... } //参数
            dataDisplayDelete(data).then(res => {
                if(res.code == 200){
                    // 删除成功处理
                }else{
                    // 删除失败处理
                }
            })
        },
    }
}
</script>

到此封装完成，可以在项目中请求接口拿到数据。