axios+vux的封装项目实用(7)

最近开发了几个移动端项目,运动vue+vux+axios,做一些简单的总结和记录

1.首先自行安装vue,vux等,就不再赘述…
2.在src目录下新建一个api文件夹,在里面新建一个index.js

  • 安装axios
npm install axios
  • main.js中引入并注册为全局属性
import Api from './api/index.js';
Vue.prototype.$api = Api;
  • 在index.js中引入
import Vue from 'vue'
import axios from 'axios';
  • 接下来 创建一个实例,并且将这个http注册为全局属性,这样就可以用this.$axios来获取到对应的实例了

在这里插入图片描述

  • 配置拦截器(使用了vux的加载提示)
    axios+vux的封装项目实用(7)_第1张图片

  • 封装常用的get,post方法

    tips:有个小坑就是headers,后台一般有json和form表单两种格式,所以这里也把它配置成了变量
    axios+vux的封装项目实用(7)_第2张图片

  • 实际使用
    直接使用this.$api.get来调用
    axios+vux的封装项目实用(7)_第3张图片

如果后台需要form表单格式的就传入2,并且把参数Qs.stringify一下就可以啦
axios+vux的封装项目实用(7)_第4张图片

你可能感兴趣的:(vue)