异步 axios 的简单封装

最新推荐文章于 2023-03-21 21:15:10 发布

zyhzyh1120

最新推荐文章于 2023-03-21 21:15:10 发布

阅读量199

点赞数

分类专栏： vue 文章标签： es6 javascript vue.js

本文链接：https://blog.csdn.net/zyhzyh1120/article/details/108665601

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏


import Vue from "vue";
import axios from "axios";
import qs from "qs";
const vm = new Vue();

// axios是否需要携带Cookie
// axios.defaults.withCredentials = true
// 此封装注意,form表单请求是没有进行拦截的

const URL = process.env.VUE_APP_BASE_API;
//发送一般请求
const http = axios.create({
   timeout: 10000, // 10s请求时间
   baseURL: URL,
   headers: {
      "Content-Type": "application/x-www-form-urlencoded",
   }
});

// 发送from表单请求
const form = axios.create({
   timeout: 10000, //响应时间
   baseURL: URL,
   headers: {
      "Content-Type": "multipart/form-data",
       "Authorization": sessionStorage.getItem("token") ? sessionStorage.getItem("token") : ''
   },
});

// 请求拦截器
http.interceptors.request.use(
   async configs => {
         vm.$toast.loading({
            mask: true,
            message: "加载中..."
         });

		configs.headers.Authorization = "Authorization": sessionStorage.getItem("token") ? sessionStorage.getItem("token") : ''
         return configs;
      },
      err => {
         return err;
      }
);

//  响应拦截
http.interceptors.response.use(async response => {
   vm.$toast.clear();
   if (response.status === 200) {
      return Promise.resolve(response);
   } else {
      return Promise.reject(response);
   }
});

export default {
	URL,
   /**
    * 封装get方法
    * @param url
    * @param data
    * @returns {Promise}
    */
   get(url, params = {}) {
      return new Promise(async resolve => {
         const data = await http.get(url, {
            params
         });
         const code = Number(data.data.code);
         if (code == 200) {
            resolve(data.data);
         } else {
            // 提示报错信息
            resolve(data.data);
            vm.$toast.fail(data.data.msg);
         }
      });
   },

   /**
    * 封装post请求
    * @param url
    * @param data
    * @returns {Promise}
    */
   post(url, params = {}, back = true) {
      return new Promise(async resolve => {
         const data = await http.post(url, qs.stringify(params));
		// 二次封装 可以一直拿到返回值
         const data = await http.post(url, qs.stringify(params));
         // const data = await http.post(url, { params });
         const code = Number(data.data.code);
         if (code == 200) {
            resolve(data.data);
         } else {
            // 提示报错信息
            resolve(data.data);
            vm.$toast.fail(data.data.msg);
         }
      });
   },
    
   /**
    * 封装form请求
    * @param url
    * @param data
    * @returns {Promise}
    */
   form(url, params = {}) {
      return new Promise(async reslove => {
         const data = await form.post(url, params);
         const code = Number(data.data.code);
         if (code === 200) {
            reslove(data.data);
         } else {
            reslove(data.data);
            vm.$toast.fail(data.data.msg);
         }
      });
   }
};