vue中拆分封装axios

举报
江咏之 发表于 2021/11/22 22:54:19 2021/11/22
【摘要】 1、在src目录下建network文件用于配置axios`。 2、在network里面先建一个config.js文件 export const GET="get"; //定义并导出GET请求 exp...

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

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。