在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧。而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不大,主要是补上了拦截器和和简洁一点。

安装axios

npm install axios --save

通过挂载的axios(只是为了对比)

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router"; // 路由
import store from "./store"; // Vuex
import axios from "axios"; Vue.config.productionTip = false; Vue.prototype.$axios = axios; new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");

页面上使用挂载好的axios

// post
this.$axios.post('products/list', { page: 1, page_size: 10 }).then(res => {
if (res.status == 200) {
this.productsList = res.data;
}
}).catch(err => {
console.log(err);
});

通过封装的axios

还需要安装qs(qs插件可以将字符串解析和序列化字符串)

npm install qs

然后在src下建一个api文件夹,起一个request.js,放入下面代码

import axios from 'axios';
import qs from 'qs'; // 创建axios实例
const service = axios.create({
baseURL: 'http://127.0.0.1/api/', // api的base_url
// withCredentials: true, // 跨域请求时是否发送cookies
timeout: 5000 // 请求超时设置
}) // 请求拦截器
service.interceptors.request.use(config => {
// 请求前做点什么?
if (!config.data) {
config.data = {};
} // console.log(config)
// 设置公共参数
console.log(qs.stringify(config.data)); return config;
}, error => {
// 处理请求错误
console.log(error); // 用于调试
return Promise.reject(error);
}) // 响应拦截器
service.interceptors.response.use(response => {
// let res = respone.data; // 如果返回的结果是data.data的,嫌麻烦可以用这个,return res
return response;
}, error => {
console.log('error:' + error); // 用于调试
return Promise.reject(error);
}) export default service;

接下来继续在api文件夹下面创建一个index.js文件(如果api接口分类需要分开的话就不要创建index.js,比如登录接口:login.js,用户接口:user.js...)

import request from '@/api/request'; // 引入封装好的axios

// 登录
export function login (data) {
return request({
url: 'login',
method: 'post',
data: data
})
} // 产品列表
export function productsList () {
return request({
url: '/products/list',
method: 'get'
})
}

页面上使用封装好的axios

import { Login } from '@/utils/helpers';
import { productsList } from '@/api'; // 默认引入index.js,如果在这个页面有其他的api就以 , 分开:{ productsList, productsPoster } export default {
data () {
return {
isLoading: true,
productsList: []
}
},
created () {
this.init();
}
methods: { // 初始化
init () {
if (!Login()) {
alert('请登录');
this.$router.go(-1)
return false;
} else {
this.getProductsList();
this.isLoading = false;
}
}, // 获取产品列表
getProductsList () { // get
productsList().then(res => {
if (res.status == 200) {
this.productsList = res.data;
}
}).catch(err => {
console.log(err);
}); // post
productsList({ page: 1, page_size: 10 }).then(res => {
if (res.status == 200) {
this.productsList = res.data;
}
}).catch(err => {
console.log(err);
});
}
}
}

以上就是这篇axios封装的所有内容了,看到这里的伙伴们如果有不明白的地方请留言哦,如果写的不好也可以留言吐槽!!!

总结

axios封装的好处在于方便的管理api,我认为这是很好的方式,而且有统一处理的拦截器,如果在每个页面都以

this.$axios.get('/api/login').then(res => {});

的方式,到了需要修改的时候就得需要一个页面一个页面的去找,这样会增加工作量(虽然这个理由可以摸鱼())。

原文链接:https://blog.langting.top/archives/73.html

【vue】axios二次封装,更好的管理api接口和使用的更多相关文章

  1. 【Vue】axios封装,更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  2. 【uni-app】uni.request二次封装,更好的管理api接口和使用

    前言 之前写了一个Vue.js的axios二次封装(点击跳转),这次是uni-app,uni-app是基于vue.js框架的,我觉得是很好用的一个框架,而且一套代码编译那么多平台,非常节省成本,当然, ...

  3. 原生 Ajax 封装 和 Axios 二次 封装

    AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...

  4. axios 二次封装

    一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等 案例 ./service/axios.js 1234567891011121314151617181920212223242 ...

  5. element el-table表格的vue组件二次封装(附表格高度自适应)

    基于vue的el-table表格二次封装组件方法 前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多 ...

  6. 基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理

    在SqlSugar的开发框架的后端,我们基于Web API的封装了统一的返回结果,使得WebAPI的接口返回值更加简洁,而在前端,我们也需要统一对返回的结果进行解析,并获取和Web API接口对应的数 ...

  7. axios二次封装的几种方法

    一.用Class方法 import axios from "axios"; declare var Promise: any; export class Request { sta ...

  8. axios二次封装

    import axios from "axios" //请求拦截器 axios.interceptors.request.use(function (config) { retur ...

  9. vue+axios请求头封装

    import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...

随机推荐

  1. .NET Core HttpClient源码探究

    前言     在之前的文章我们介绍过HttpClient相关的服务发现,确实HttpClient是目前.NET Core进行Http网络编程的的主要手段.在之前的介绍中也看到了,我们使用了一个很重要的 ...

  2. 【JavaScript数据结构系列】02-栈Stack

    [JavaScript数据结构系列]02-栈Stack 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识栈结构 栈是非常常用的一种数据结构,与数组同属线性数据结构,不同于数组的 ...

  3. 格雷码 CSP(NOIP??)2019 洛谷 P5657

    洛谷AC通道! 多年过后,重新来看这道D1T1,20min不到AC,再回忆起当初考场三小时的抓耳挠腮,不禁感慨万千啊!! 发篇题解记录一下. 思路:直接dfs模拟即可(二进制找规律是不可能的, 这辈子 ...

  4. [PHP学习教程 - 类库]001.全局唯一ID(GUID)

    GUID: 即Globally Unique Identifier(全球唯一标识符) 也称作 UUID(Universally Unique IDentifier) . GUID 是一个通过特定算法产 ...

  5. nvm的安装,安装node,npm

    先说说我为什么使用nvm吧 最近在搞react-native,就碰到了很多坑,其中就有node带来的坑,当你运行react-native start (这是rn启动服务器的命令)就会报一个正则的错误, ...

  6. Matlab矩阵学习一 矩阵的创建

    Matlab矩阵创建 1.直接输入数值创建       矩阵元素要用[ ] 括起来,";"代表一行结束,以下创建方式也是合法的,矩阵的元素可以是实数,也可以是复数,复数用a+bi表 ...

  7. python脚本:在Ubuntu16系统上基于xtrabackup2.4和mysql5.7实现数据库数据的自动化备份和恢复,亲测有效!

    1 安装教程 官网安装教程:https://www.percona.com/doc/percona-xtrabackup/2.4/installation/apt_repo.html -------- ...

  8. JAVASE(十一) 高级类特性: abstract 、模板模式、interface、内部类、枚举、注解

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1.关键字 abstract 1.1.abstract可以修饰:类,方法 1.2.abstract修饰方 ...

  9. Java 第十一届 蓝桥杯 省模拟赛十六进制转换成十进制

    问题描述 请问十六进制数1949对应的十进制数是多少?请特别注意给定的是十六进制,求的是十进制. 答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这 ...

  10. Java实现 LeetCode 532 数组中的K-diff数对(双指针,滑动窗口)

    532. 数组中的K-diff数对 给定一个整数数组和一个整数 k, 你需要在数组里找到不同的 k-diff 数对.这里将 k-diff 数对定义为一个整数对 (i, j), 其中 i 和 j 都是数 ...