vue工具之axios 安装与使用

 一、安装

• axios
  

  ⏰ 使用npm安装

  $ npm install axios

  ⏰ 使用yarn安装

  $ yarn add axios

• qs
  

  🔊 qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。qs.parse()和qs.stringify()相反，是将序列化的内容解析成对象的形式。

  npm install qs

二、封装axios

创建src/utils/http/index.js 路径文件

import axios from 'axios';
import qs from "qs";
import store from "@/store/index";      //状态管理
import router from '@/router/index';
import { dataList } from '@/components/aspin/data'; //类似loading效果, 替换成自家的
import { message } from 'ant-design-vue'; // 提示UI,参考自己引入的UI框架，这里以蚂蚁的UI框架为例
import { Local } from '@/utils/storeage/index'; //本地存储

//数据请求字符
axios.defaults.baseURL = process.env.VUE_APP_API_URL;
// 如果请求话费了超过 `timeout` 的时间，请求将被中断
axios.defaults.timeout = 5000;
// 表示跨域请求时是否需要使用凭证
axios.defaults.withCredentials = false;

//【设置请求头】
// axios.defaults.headers.common['token'] =  AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// 允许跨域
axios.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*";

//【请求拦截器】
axios.interceptors.request.use(function (config) {
    if (
        config.method === "post" ||
        config.method === "put" ||
        config.method === "delete"
    ) {
        // qs序列化
        config.data = qs.parse(config.data);
    }
    // 若是有做鉴权token , 就给头部带上token
    if (Local.get(store.state.Roles)) {
        store.state.Roles
        config.headers.Authorization = Local.get(store.state.Roles);
    }
    return config;
}, error => {
    message.error(error.data.error.message);
    return Promise.reject(error.data.error.message);
})

//【响应拦截器】
axios.interceptors.response.use(
    //成功响应
    function (config) {
        dataList.show = true
        if (config.status === 200 || config.status === 204) {
            setTimeout(() => {
                dataList.show = false
            }, 400)
            return Promise.resolve(config);
        } else {
            return Promise.reject(config);
        }
    },
    //响应失败
    function (error) {
        if (error.response.status) {
            switch (error.response.status) {
                case 400:
                    message.error("发出的请求有错误，服务器没有进行新建或修改数据的操作==>" + error.response.status)
                    break;
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401: //重定向
                    message.error("token:登录失效==>" + error.response.status + ":" + store.state.Roles)
                    Local.remove(store.state.Roles)
                    Local.get(store.state.Roles)
                    router.replace({
                        path: '/Login',
                    });
                    break;
                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                    message.error("用户得到授权，但是访问是被禁止的==>" + error.response.status)
                    break;
                case 404:
                    message.error("网络请求不存在==>" + error.response.status)
                    break;
                case 406:
                    message.error("请求的格式不可得==>" + error.response.status)
                    break;
                case 410:
                    message.error("请求的资源被永久删除，且不会再得到的==>" + error.response.status)
                    break;
                case 422:
                    message.error("当创建一个对象时，发生一个验证错误==>" + error.response.status)
                    break;
                case 500:
                    message.error("服务器发生错误，请检查服务器==>" + error.response.status)
                    break;
                case 502:
                    message.error("网关错误==>" + error.response.status)
                    break;
                case 503:
                    message.error("服务不可用，服务器暂时过载或维护==>" + error.response.status)
                    break;
                case 504:
                    message.error("网关超时==>" + error.response.status)
                    break;
                default:
                    message.error("其他错误错误==>" + error.response.status)
            }
            return Promise.reject(error.response);
        } else {
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            store.commit('changeNetwork', false);
        }
    }
)
export default axios

三、全局使用

⏰ main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
//渲染
app.mount('#app')
//全局ctx(this) 上挂载 $axios
app.config.globalProperties.$api = axios 

四、封装使用

创建src/api/index.js  路径文件，以及相关模块

/*经销商模块接口列表*/
import axios from '@/utils/http'; // 导入http中创建的axios实例
import qs from 'qs'; // 根据需求是否导入qs模块
const dealer = {
    //【GET】 获取经销商列表
    get(params) {
        return axios.get(`/admin/dealer/index`, {
            params: params
        });
    },
    //【POST】 停用
    prohibitUse(params) {
        return axios.post(`/admin/dealer/delete`, params);
    },
}
export default dealer;

⏰ mall.js

//商城设置模块接口列表
import axios from '@/utils/http'; // 导入http中创建的axios实例
const mall = {
    //【GET】获取商城配置
    get(){
        return axios.get(`/mall_admin/mall/config`);
    },
    //【POST】更新商城配置
    update(id, params){
        return axios.patch(`/mall_admin/mall/config/${id}`, params);
    },
}
export default mall;

import mall from '@/api/mall'; // 商城模块
import dealer from '@/api/dealer'//经销商

// 导出接口
export default {
    mall,
    dealer,
}

五、ts封装

vue知识点之使用ts封装axios