axios请求接口http_超级简单好用的 Vue封装axios

2024-05-12 18:07:40

简述Axios

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。说到get、post，
项目比较大的时候可以使用axios来统一管理请求方式和接口  这样后期就方便维护和修改

封装axios和管理接口

npm安装

npm install axios

cdn使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

要封装axios基本需要两步：

1、统一管理请求方式和请求配置

2、统一管理接口

既然封装需要两步那么我们就分别写两个文件一个文件负责统一管理请求方式和请求配置

另一个文件负责统一管理接口笔者建议把两个文件放在一个文件夹中便于查找

1、统一管理请求方式和请求配置

请求配置包括环境的切换请求拦截和响应拦截或者是设置超时时间

请求方式：

统一管理接口：

请求接口这里也可以写成是一个一个的方法然后抛出笔者写的是一个对象然后抛出这个对象当然大道殊途同归

在项目中使用

引入：引入也有好几种方式这里简单说两种比如你在.vue文件中引入如果说你觉得在每个.vue文件中单独引入的话会很繁琐代码不整洁（最好别有强迫症）你也可以在main.js中全局引入然后挂载在Vue的原型上边

import API from '../src/Network/api' // 引入入口文件

Vue.prototype.$http = API // 挂载在原型上

然后就可以在项目中愉快的使用了

直接上代码：

add() { // 这里是一个POST请求

this.$http

.login({

mobile: this.username,

password: this.password,

type: 1,

client: 1

})

.then(res => {

console.log(res);

if (res.data.code == 200) {

this.$router.push({

path: "/My"

});

} else {

this.$toast("账号或密码错误");

}

});

},

好了就这样简单写一下吧加油奥利给！！

axios请求接口http_超级简单好用的 Vue封装axios相关推荐

axios请求接口http_使用axios请求接口,几种content-type的区别详解
axios的使用安装(一般使用框架的话, 脚手架都集成了) $ npm install axios 请求示例 // POST axios.post('/user', { firstName: 'Fr ...
axios请求接口http_Vue实战038：api接口模块化统一管理
一开始使用Vue时,我们用axios发送请求时一般会将api接口直接写在对应的请求方法中,这样当我们项目需要修改请求时我们就需要先去找到当前的组件,然后再找到对应的事件方法,最后才能将api修改,这样 ...
手写一个获取验证码的接口，超级简单
手写一个获取验证码的接口,超级简单,觉得有用就试试吧,话不多说代码附上 private static final int VERIFY_CODE_HEIGHT = 25; //验证码高度private ...
vue中使用axios请求接口，请求会发送两次
vue中使用axios请求接口,请求会发送两次的问题浏览器分为简单请求以及非简单请求: 解决方案: 跨域请求需要先发一次Option预请求,OPTIONS是检验是否允许跨域的,如果不希望OPTION ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
axios请求接口http_Vue使用Axios实现http请求以及解决跨域问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...
axios请求接口http_axios调用接口
axios调用接口 1. 按照axios npm install --save-dev axios 2.在main.js 引入axios, 设置全局属性$http 指向axios main.js im ...
vue封装axios
(4条消息) Vue--axios的二次封装_前端杂货铺的博客-CSDN博客 1.下载axios依赖包 npm install axios 2.在src目录下新建utils文件夹,在utils文件夹下 ...
axios 请求接口获取文件流数据导出数据到excel,解决乱码
axios.get("URL",{params:{data1:data1,data2:data2},headers: { 'Content-Type': 'application/ ...

最新文章

热门文章