vue中拆分封装axios

1、在src目录下建network文件用于配置axios`。
2、在network里面先建一个config.js文件

export const GET="get";   //定义并导出GET请求
export const POST="post";  //定义并导出POST请求

export const path={                 //定义路由对象并抛出
    list:"/small4/user/detail",     //定义路由(多级路由与core中axios中的路由拼接)，调用谁拼接谁
}
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

3、在network中建一个core.js文件

import {GET,POST} from "./config";   //导入config
import axios from "axios";        //安装axios并引入
const instance =axios.create({      //创建一个拥有通用配置(如：路由等)axios实例
    baseURL:"https://api.it120.cc"  //通用路由与config里的多级路由拼接
});
export function request(method,url,params){   //封装一个函数并导出，类似于this.$axios.get(url,{})
    switch(method){                     //switch语句判断是get还是poat请求
        case GET:           //如果是get就调用下面封装的get请求并返回
            return get(url,params)     
        case POST:        //post
            return post(url,params)
    }
};

function get(url,params){       //封装get请求
    return instance.get(url,params)   //调用上面axios实例并return返回
};
function post(url,params){      //封装post请求
    return instance.get(url,params)
};

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
 

4、在network中建一个index.js文件

import {request} from "./core"   //导入core
import {GET,POST,path} from './config'   //导入config

const network={          //声明一个对象
    getStoreList(params){return request(GET,path.list,params)}
    //自定义事件名      调用core中的request函数发送get请求，path.list是调用config里的多级路由
}

export default network   //抛出network对象  在main.js里接收全局引入

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

5、在main.js里接收全局引入

import network from './network/index'  //全局引入在那都能调用
Vue.prototype.$network=network

  
 

  
1
  
2
 

6、之后就可以在组件中调用了

 mounted() {
    this.$network   //调用network中的getStoreList({参数--用于传给params})
      .getStoreList({
        page: 1,
        pageSize: 2
      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/107007380