最近，一个vue-cli项目从0开始。虽然axios也可以直接使用，但是接口比较分散，不容易维护，还会产生很多重码。因此，作者为axios统一了接口处理，没有太多废话，直接加载了代码。

首先在vue-cli项目的src路径下新建一个axios文件夹，在axios文件夹中创建aps.js和request.js。用api.js写接口，axios的包用request.js写，项目组织如下：

1.axios统一封装

然后axios统一打包。首先介绍了axios和qs的依赖关系，main.js主要用于以后统一处理接口，比如调整接口时显示加载。这个main.js可以根据个人情况添加，也可以不添加。

//request.jsimport来自“axios”的axios；从“qs”导入QS；从导入应用程序./main . js '；然后创建一个axios实例，这个process.env.BASE_URL是在config/dev.evn.js和prod.evn.js中配置的：

/* * * *创建axios实例后，请求拦截器用于统一处理axios请求配置，如下所示：

/* * * * * config.method==='post '？config . data=QS . stringify({ 0.config . data }): config . params={ 0.config . params }；config . header[' Content-Type ']=' application/x-www-form-URL encoded '；返回配置；}，错误={//请求错误处理app。$ vux . toast . show({ type : ' warn '，text : error })；Promise.reject(错误)})；然后统一处理响应，代码如下：

/* * * *//这里根据后端if(response . data . result==' true '){ return response . data；} else {app。$vux.toast.show({ //常规错误处理类型：' warn '，text : response . data . msg })；} }，错误={//响应错误处理console . log(' error ')；console.log(错误)；console.log(JSON.stringify(错误))；让text=JSON . parse(JSON . stringify(error)). response . status===404？404' : '网络异常，请重试'；app。$ vux . toast . show({ type : ' warn '，text : text })；return Promise.reject(错误)})；最后，我们的axios实例被公开，axios的封装也就完成了。

导出默认服务；

2.Axios接口的调用方式

axios封装后，调用很简单。我们在api.js文件中编写接口。(当然，如果你的业务非常复杂，建议将不同业务的API分离到不同的文件中，以便日后维护。).

注意：post请求参数放在数据中，get请求参数放在params中。

//来自“”的api.jsimport服务。/request ' export const getpersonfo=data={ return service({ URL : '/person _ pay/getpersonfo '，method: 'post '，data })}；然后在混凝土构件中调用它。

//index . vueimport { GetPersonnfo } from './axios/API . js ' export default { create d : async function(){ const params={ card _ no : ' 111 ' }；让res=等待getpersonfo(params)；console . log(RES)；}}附上项目代码地址： https://github.com/xie991283109/vueCli-test

以上是边肖介绍的axios包，使用拦截器处理接口进行详细讲解和集成。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！