Axios与nprogress的使用,Vue项目中与请求相关的配置

140 阅读1分钟

Axios的使用及其二次封装

src文件夹下创建api文件夹。

image.png request.js文件中,引入axios并且进行二次封装。引入nprogress组件及其样式。
axios.create函数创建一个新的axios实例,baseURL代表基础路径,timeout配置响应超时时长。

image.png interceptors拦截器,可以配置请求拦截器和响应拦截器,在请求发出之前和响应发出之前做一些处理。此处在请求发出之前使用了nprogress.start()启动进度条,响应回复之前使用了nprogress.done()结束进度条。
同时这里还可以设置失败的回调函数,写在第二个参数里面。
默认导出requests。

/api/index.js中写接口获取数据。

image.png

参数可以以data字段的形式给出。

image.png

也可以写在参数里面。

image.png

Vue项目中与请求相关的配置