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文件里面写请求

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