vue2集成axios进行二次封装.md · run away/mayun_blog

---
title: vue2集成axios进行二次封装
date: 2023-06-28 16:17:04
categories:
- 前端
tags:
- vue2
- axios
---

### 前言

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中发送HTTP请求。它是一个流行的第三方库，提供了一种简洁而强大的方式来进行网络请求。

Axios具有以下特点和功能：

1. 支持浏览器和Node.js：Axios可以在浏览器和Node.js环境中使用，使得在前端和后端开发中都能方便地发送HTTP请求。
2. Promise支持：Axios基于Promise实现，可以使用Promise的特性进行异步处理，包括使用async/await进行异步编程。
3. 提供简洁的API：Axios提供了一组简洁而易用的API，可以轻松地发送各种类型的HTTP请求，包括GET、POST、PUT、DELETE等。
4. 支持请求和响应拦截器：可以通过拦截器对请求和响应进行全局的处理，如在请求发送前添加请求头、在响应返回后对数据进行处理等。
5. 支持取消请求：Axios提供了取消请求的功能，可以取消尚未完成的请求，避免不必要的网络请求和资源浪费。
6. 提供请求和响应的转换：Axios支持自定义请求和响应的数据转换器，可以在发送请求和接收响应时对数据进行转换，如JSON、FormData等。

总之，Axios是一个功能强大且易于使用的HTTP客户端，它简化了在前端和后端进行网络请求的过程，并提供了丰富的功能和灵活的配置选项。它成为了许多开发者首选的HTTP请求库之一。

### axios一次封装

1.在utils包新建文件request.js添加如下

```javascript
/* 封装axios用于发送请求 */
import axios from "axios";
import Element from "element-ui"

/*
(1)request 相当于 Axios 的实例对象
(2)为什么要有request,而不是直接用axios
  * 项目开发中，有可能会有两个基地址
  * 不同的接口配置不同（有的要token,有的不要token）
*/

axios.defaults.baseURL = "http://localhost:8088" //后端服务器地址

const request = axios.create({
    timeout: 5000, // 请求超时：当5s没有响应就会结束请求
    headers: {
        'Content-Type': "application/json; charset=utf-8"
    }
})

// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
request.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        config.headers['token'] = localStorage.getItem("token")
        return config
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
    }
)

// 添加响应拦截器
request.interceptors.response.use(
    function (response) {
        // 对响应数据做点什么
        if (response.data.code === 200 || response.data.code === 201) {
            return response
        } else {
            Element.Message.error(response.data.msg, { duration: 3000 })
            return Promise.reject(response.data.msg)
        }
    },
    function (error) {
        // 对响应错误做点什么
        Element.Message.error(error.msg, { duration: 3000 })
        return Promise.reject(error)
    }
)

export default request
```

### axios的二次封装

例如：对用户的操作，在api文件下创建userApi.js文件，添加如下内容

```javascript
import request from "@/utils/request";

function userLogin(user) {
    return request({
        url: '/login',
        method: 'post',
        data: user
    })
}

function getUserList() {
    return request({
        url: '/file/upload',
        method: 'post'
    })
}

export default {
    userLogin,
    getUserList
} 
```

### 配置路由

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginView from '@/views/LoginView'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'login',
    component: LoginView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  if (to.path === '/') return next()
  let token = localStorage.getItem("token");
  if (!token) return next("/")
  next()
})

export default router
```

### 登录使用

```html
<template>
    <div>
        <el-form label-width="80px" :model="user" style="width: fit-content;">
            <el-form-item label="账号">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.password"></el-input>
            </el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-form>
    </div>
</template>
<script>
import userApi from '@/api/userApi'
export default {
    data() {
        return {
            labelPosition: "center",
            user: {
                username: "",
                password: "",
            },

}
    },
    mounted() {

},
    computed: {

},
    methods: {
        submitForm() {
            userApi.userLogin(this.user).then((response) => {
                console.log(response.data);
                localStorage.setItem("token", response.data.data);
                this.$router.push("/about")
            }).catch((error) => {
                console.log(error)
            })
        },
    },
}
</script>
<style scoped></style>
```

run away/mayun_blog

简介

发行版

贡献者

近期动态

run away/mayun_blog .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

run away/mayun_blog