vue中将axios封装

在平时写项目中，经常会遇到组件调用同一个接口或者不同接口

import axios from "axios"axios({url: "https://autumnfish.cn/mv/url",params: {//   接收传来的MVidid: this.$route.query.id,},}).then(({ data: { data } }) => {this.mvUrl = data.url;});

这样代码非常冗余，如果axios哪天不维护就要把每个用到axios组件一个个更改

解决方法就是将axios封装进单独文件，然后需要调用接口接按需引入这个文件在的不同接口方法

1.创建app.js文件

可以配置更多默认项，这里用baseURL示例

import axios from "axios";
//接口1
export function requestWyy(config) {const instance = axios.create({baseURL: "https://autumnfish.cn",});return instance(config);
}
//接口2
export function requestWyy2(config) {const instance = axios.create({baseURL: "https://autumn1fish.cn",});return instance(config);

这里没有用默认暴露是因为可能要调取不同接口，就不能调用另外的方法了

2.按需引入

import { requestWyy } from "../request/app";requestWyy({url: "/banner",}).then((res) => {this.bannersImg = res.data.banners;});

一个组件中需要调用哪个接口接引入哪个封装的实例

优点

更好维护，直接改app,js文件里的方法就行

vue中将axios封装相关推荐

vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
vue之axios封装
本想使用axios,但不封装的话,使用起来太臃肿,此封装方式是根据别人封装格式改造过来使用,地址在最下面. 1.axios安装: npm install axios -D 2.封装axios,inde ...
vue axios封装获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
vue2.0 如何自定义组件（vue组件的封装）
一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
vue中axios请求的封装
axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以 ...
vue项目请求封装；axios封装使用
vue项目,封装axios请求方式和响应状态码:以及接口的api封装: 目录结构: 1.具体在src/utils/request.js下封装axios: ①引入axios和router ②引入elem ...
axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...

vue中将axios封装

1.创建app.js文件

2.按需引入

优点

vue中将axios封装相关推荐

最新文章

热门文章