VUE封装axios

认识axios

在认识axios之前，我们先认识一下axios。打开axios的中文官文，我们能看到这样一句话：Axios 是一个基于 promise 网络请求库。那么，不禁要问，什么叫做基于promise的网络请求库呢？我们要知道，与promise对应的就是callback型的网络请求库了。而promise则是在callback的基础上进行的升级，解决了callback可能带来的“地狱回调”问题。

简单的来说，promise使得你的网络请求在执行的时候，避免了代码嵌套的问题。

认识VUE中是如何使用axios的

在一般的情况下，我们使用axios就是引入axios对象，并将其挂载到app实例上。但如果是封装的话，我们则需要在挂载之前对其进行封装，然后将封装好的对象挂载到app实例上。这句话非常重要。

封装的具体步骤

第一步：封装axios

在这里，axios的安装等我不再过多赘述，直接上封装的代码，如下：

//导入axios
import axios from 'axios'

axios.defaults.baseURL="http://127.0.0.1:80/"
axios.interceptors.response.use(response=>{
    return response
},error=>{
    console.log(error)
})

//使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。
const API = axios.create({
	timeout: 2000,                   //请求超时设置，单位ms
	headers:{
		'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
	}
})

//导出我们建立的axios实例模块，ES6 export用法
export default API

在这里，对axios请求的基本地址进行了封装，并对响应的返回进行了拦截，进行拦截的主要目的是，当请求出错时，进行统一的处理。封装的程度大家可以根据自己的需求进行扩展，目前我封装到这一步就可以了。这里的API就是一个封装好的axios对象了，当然，这个封装的文件其实你放在任何地方都可以，不过最好放在一些能一眼看出时封装axios请求的文件中更好。

第二步：将封装好的axios挂载到app实例上

其挂载代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import API from './axios/axios'
import router from './router/index'
import element from 'element-plus'
import 'element-plus/theme-chalk/index.css'//把路径lib去掉后正常使用
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//引用饿了么图标
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(router)
app.use(store)
app.use(element,{
    locale: zhCn,
})
app.config.globalProperties.$axios=API
app.mount('#app')

 其中，大家可以明显看见API的使用与其他的use使用不同，这是因为axios没有实现use这个方法（具体大家去了解，我也不是非常清除） 。

第三步：使用

具体的使用代码如下：

API.get("/commission/publish",{
                    params:{
                        commission_content:this.task.synopsis,
                        commission_end_time:this.task.endTime,
                        commission_money:this.task.money,
                        commission_publish_account:this.$store.state.user.account,
                        commission_publish_connection:this.task.connection,
                        commission_type:this.task.type,
                        token:localStorage.getItem('token')
                    }
                }).then((res)=>{
                    if(res.data.code==20061){
                        ElMessage({
                            type: 'success',
                            message:"悬赏发布成功~"
                        })
                    }
                    this.refresh("0%");
                })

这里可以看到，基础地址，网络请求失败的处理已经不需要我们再去书写了。 

总结

axios的封装应该先封装好来，再挂载到app实例上去。封装时可以用拦截器对请求进行一些统一的处理。如有不当之处，请多指教，谢谢观看！