vue中拆分封装axios

简介: 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中的路由拼接),调用谁拼接谁
}

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里的多级路由拼接
});
exportfunction 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)
    }
};
functionget(url,params){       //封装get请求
    return instance.get(url,params)   //调用上面axios实例并return返回
};
function post(url,params){      //封装post请求
    return instance.get(url,params)
};


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里接收全局引入

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

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

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

mounted() {
    this.$network   //调用network中的getStoreList({参数--用于传给params})
      .getStoreList({
        page: 1,
        pageSize: 2      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }
目录
相关文章
|
16天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
19 0
|
18天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
19天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
25天前
axios封装和配置
axios封装和配置
19 0
|
25天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
38 0
|
25天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
31 0
|
1月前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
20 0
|
1月前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
JavaScript 前端开发 API
VUE axios使用方法与跨域问题解决
'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
21075 0
|
1天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
4 0