vue项目中简单封装axios成插件来使用

前提是准备工作都做好啦~~
在这之前一直使用的是 vue-resource用的也很顺手,后面了解到公司使用的是 axios,就来学习使用axios,看axios 的官方文档觉得使用的方式和ajax也差不多哈~,都是些套路

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。它不可以像vue-resource那样install之后Vue.use()一下就可以全局使用,每次使用都要引入,所以要将其封装起来,并且也便于项目的请求配置代码统一维护与管理。
下面就来介绍一下在我的项目中是怎么简单的实现 axios的全局使用的(看了好多大神的,感觉都很厉害,也有结合vuex,但是现在我还不需要哈,就从最简单的而开始,慢慢提高哈~~~)

  1. 这是我的 文件设置
    挨批
    其中api.js: 统一存放项目的全部的 接口即 URL
    axios.js:专门用来 配置axios的config配置,以及设置拦截器
    http.js:就是用来封装 axios 常用的请求的
    netseriver.js:用来 把axios封装成一个 插件可以Vue.use()来全局使用
  2. axios.js
    vue项目中简单封装axios成插件来使用_第1张图片
  3. http.js
    vue项目中简单封装axios成插件来使用_第2张图片
  4. netseriver.js
    vue项目中简单封装axios成插件来使用_第3张图片
    注意:如果文件你还使用了vue-reource,那就不要使用$http作为axios 的别名来使用了!会有冲突!
  5. main.js
    在这里插入图片描述
  6. 项目中具体使用
    先引入请求的api.js (里面包含项目所有的 url地址)
    在这里插入图片描述
    不带参数的get请求:
    vue项目中简单封装axios成插件来使用_第4张图片
    带参数的get请求:
    vue项目中简单封装axios成插件来使用_第5张图片
    post请求
    vue项目中简单封装axios成插件来使用_第6张图片
    以上就实现了像vue-resourse那样直接用来请求啦~~
    第一次自己封装,小白一个,不对的地方多多指教,反正在我的项目中是可以好好地使用滴~
    其实有好多配置项我都没有配置,只是还没遇到问题,等遇到问题具体问题具体分析~

你可能感兴趣的:(vue项目中简单封装axios成插件来使用)