vue axios整合使用全攻略

前端之家收集整理的这篇文章主要介绍了vue axios整合使用全攻略前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

惯例先安装axios,不多说!

cnpm install axios

1.axios配置

我的目录结构src/axios/index.js,axios配置都在该文件

src/axios/index.js 如下:

拦截器,axios.interceptors.request.use发送请求前处理

axios.interceptors.response.use接受返回后,回调之前处理处理

{ if(config.method === 'post'){ config.data = qs.stringify(config.data); } return config; },(error) =>{ return Promise.reject(error); }); //返回状态判断 axios.interceptors.response.use((res) =>{ if(!res.data.success){ return Promise.reject(res); } return res; },(error) => { //404等问题可以在这里处理 return Promise.reject(error); });

公共方法

{ axios.post(url,params) .then(response => { resolve(response.data); },err => { reject(err); }) .catch((error) => { reject(error) }) }) }

业务方法

如果不理解可以将以上代码依次copy到src/axios/index.js文件,当然axios.defaults.baseURL = 'http://localhost:8008'; 需要换成自己的api。

2全局注册axios

为了使用axios,在各个组件中引入就可以使用:

但是使用这种方法我们需要在每一个组件中去引入,有些麻烦,下面我们介绍一种全局注册方法

在main.js中:

添加这两行代码,将 axios 改写为 Vue 的原型属性,这样在各个组件中都可以使用axios,具体方法如下:

总结

以上所述是小编给大家介绍的vue axios整合使用全攻略。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章