vue的axios封装

简介: vue的axios封装

一、认识axios

此环节带领大家了解axios,如果熟练的同学可直接移步到下面的封装环节哦!

1、axios是什么?

官方解释:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

2、为什么要用axios?

axios最大的亮点就是它支持了ES6里的 Promise Api,感兴趣的同学可以去看一看阮一峰写的 《ES6入门教程》,传送门:ES6入门教程

特性

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

二、封装axios

使用npm

$ npm install axios

使用yarn

$ yarn add axios
在src里面创建uitl文件并创建一个js文件

在这个js文件里面写axios封装
import axios2 from "axios";
import Vue from "vue";
async function http2(options,withLoading = true) {
    options.headers = {Authorization:sessionStorage.getItem('token')};
    if (withLoading) Vue.prototype.$weiLoading.open(); //开启loading
    await new Promise(resolve => setTimeout(resolve,500));
    return axios2(options)
        .then(res => {
            if (res.status === 200) {
                let result = res.data;
                switch (result.code) {
                    case 200:
                        if (withLoading)Vue.prototype.$weiLoading.close();
                        return result.data;
                    case 199:
                    case 500:
                    case 401:
                        sessionStorage.removeItem('token');
                        sessionStorage.removeItem('name');
                        if (!sessionStorage.removeItem('token')) {
                            // Vue.prototype.$weiLoginAlert();
                            // Vue.prototype.$weiAlert('登录已过期');
                        }
                    case 404:
                        throw new Error(result.msg); // 有错,显示抛出异常直达下面的catch
                }
            } else {
                throw new Error(res.statusText);
            }
        })
        .catch(function (error) {
           if (withLoading) Vue.prototype.$weiLoading.close();
            // Vue.prototype.$weiAlert('登录已过期');
            return Promise.reject(error.message);
        })
}
export default http2;
在mian.js里面把https添加到vue的prototype里面

在src里面创建api文件并且创建一个index.js文件

在这个index.js文件里面写请求

c5afe10e87b66d537ecb242d201ed23c.png

9d952f96f3df92c0219b15a9a52fea1b.png

最后在文件里面进入就可以用了

6b26fab8451f1b09dcfbfe6c23872318.png

f2bce452ef8cef413d8587601800941e.png

目录
相关文章
|
2月前
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
96 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
|
2月前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
243 59
|
2月前
|
资源调度 JavaScript
|
2月前
|
缓存 JavaScript 搜索推荐
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
152 4
|
2月前
|
Web App开发 JavaScript 数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
168 7
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
156 1
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
185 1
|
2月前
|
JavaScript 前端开发 Java
vue2知识点:Vue封装的过度与动画
vue2知识点:Vue封装的过度与动画
16 0
下一篇
DataWorks