vue axios的封装和调用

最近需要用到关于axios的封装和使用，下面就简单记录一下我的操作。如果有更简单的可以评论区告诉的。直接上代码！！！认真花三分钟看看，对于不会怎么封装axios的伙伴有一定的帮助，可以直接掌握封装思想和方法！！认真看认真看！！！！
该篇文章是在vue的情景下使用的
1.在某个目录下创建一个文件夹。建议在src下面新创建。同时创建一个api.js文件和httpHelper.js文件。

其中api.js是用来进行拦截的。因为每次往后端发送请求什么的，都需要拦截一下，看看能不能成功拦截或者是返回是否符合要求。
2.api.js文件

import axios from 'axios';//这个需要你自己去npm install axios进行安装
const axiosInit = axios.create({//创建一个axios实例
    baseURL:"http://localhost:8090",//基准URL，就是相同的那一部分
    time: 3000,//响应时间
})
//下面的是请求拦截
axiosInit.interceptors.request.use((config) => {
    // 请求成功，一般都需要在这里做一些配置，下面的是我自己加上token到请求头
    //如果本地缓存中存在后端发过来的token，就在请求头中添加token上去
    if (localStorage.getItem('token')) {//括号里面的token是你自己定义的，因为我在我的登录界面的时候，就把后端返回的token存在localStroage，同时命名为token，所以这里你们可以自己根据自己的项目进行修改。如果
        config.headers['token'] = localStorage.getItem('token');//添加上去请求头
    }
    return config;//通过，返回响应的拦截
}, (error) => {//出现错误
    return Promise.reject(error);//返回错误信息
}
)

//下面的是响应拦截
axiosInit.interceptors.response.use(
    (response) => {//如果后端返回成功，就执行{}里面的内容
        console.log(response);//打印一下后端返回的数据
        if(response.status == 200){//判断一下后端返回的数据中的状态码是不是200，如果是200，就执行下面的return
            return Promise.resolve(response);
        }else{//如果返回的状态码不是200，就返回错误的信息，同时也可以在这里定义其他的状态码，然后加上去
            return Promise.reject(response);
        }
    },
    (error) =>{//后端没有成功返回数据，就执行下面的return
        return Promise.reject(error);
    }
)

export default axiosInit;//把上面创建的实例暴露出去，方便等等我们在httpHelper.js文件进行引入

3.httpHelper.js文件

import axiosInit from '@/api/api'; //把上面的暴露出来的axionInit进行引入，这样就可以使用我们上面定义的拦截器

//封装get函数
export const get = (url,data) => {
    return axiosInit({
        url:url,
        method:'GET',
        params:data,
    })
}

//封装put函数
export const put = (url,data) => {
    return axiosInit({
        url:url,
        method:'PUT',
        data:data,
    })
}

//封装post函数
export const post = (url,data) => {
    return axiosInit({
        url:url,
        method:'post',
        data:data,
    })
}

//括号里面的url和data都是调用的时候传进来的参数
//我上面只是封装了常用的get、post、put请求方法，其他你们也可以自行封装。我这里不是采用默认导出的，因为需要什么就进行按需导入。如果默认导出的话，还得导出名字.post，个人不是很喜欢这种使用方法。

4.vue文件(就是需要用到方法的vue文件中)
这里就用一个登录的例子来说明

<template>
	//具体样式自行定义，这里就只是显示一个button，就是登录按钮
	//我采用的是element框架，要是不知道是啥的话，你们就把自行百度 button触发事件 
 	<el-button @click="confirm">登录</el-button>
</template>
<script>
//导入httpHelper文件
import {post,get,put} from '@/api/httpHelper.js';//from后面跟的是httpHelper.js文件的路径，你们自行修改
//下面的name，data什么的自行定义
methods:{
	confirm() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          //valid成功为true，失败为false
          //去后台验证用户名密码
          post("/user/login", this.loginForm)//调用按需导入的post方法,"/user/login"这个就是传到httpHelper.js中的url,this，loginForm就是把输入的账号密码作为参数同样传到httpHelper.js，httpHelper.js里面再进行发送到后端
            .then((res) => res.data)//数据过滤，只要后端返回的data数据
            .then((res) => {
              if (res.code == 200) {//其实这里可以不用判断状态码了。因为我们拦截器那里进行验证了，我只是贪好玩规范写一下
                // 把后端返回的数据存储在浏览器本地的缓存中
                // token是存储token的
                localStorage.setItem("token", res.data.token);//这里就是我前面说的把后端返回的token值存储在本地，同时命名为toke
                this.$router.replace("/Index");//满足条件就路由跳转
              } else {
                return false;
              }
            })
            .catch((err) => {
              ElMessage.error(err);//这里只是打印出来错误信息，你们也可以删掉
            });
        } else {
          return false;
        }
      });
    },
},
</script>

好，大功告成！如果你们看到这里的话，你们就已经会了axios的封装了！有不会的评论区说一下，我看到会及时回复！
代码就像是粥一样，需要用时间去熬出来的！！