在vue项目中优雅地封装axios

• axios简介

axios 是一个用来发送网络请求的js库,返回的格式是Promise.

vue项目中基本都是用axios发起网络请求。

• 安装配置axios

1. 安装axios

npm install axios --save

　　2. 配置axios

　　2.1 创建Axios实例

　　2.2 添加请求拦截器

       2.3 添加响应拦截器

       2.4 配置全局的laoding

在src/util 下面新建axios.js 文件

 

import axios from ‘axios’;
import { Elmessage, ElLoading } from 'element-plus'
import  {ref}  from 'vue'

//1.创建axios实例
const instance = axios.create({
   //接口
   baseUrl: '/api',
   //超时时间
   timeout: 3000
})

//2.请求拦截器
instance.interceptors.request.use(
  config => {
      let token = sessionStorage.getItem('token');
      if(token) {
          config .header['token'] = token
      }
      //加载loading
      addLoading()
     return config;
  }            
);

//3.响应拦截器
instance.interceptors.response.use(
    res=>{
       //取消加载loading
       cancelLoading();
       return res;

    },
    error=>{
         cancelLoading();
         if(error && error.response) {
            const  status = error.response.status
            switch(status) {
                case 400:
             ElMessage.error("请求错误");
          break;
        case 401:
          ElMessage.error("未授权，请重新登录");
          break;
        case 403:
          ElMessage.error("登录过期，请重新登录");
          break;
        case 404:
          ElMessage.error("请求错误，未找到相应的资源");
          break;
        case 408:
          ElMessage.error("请求超时");
          break;
        case 500:
          ElMessage.error("服务器错误");
          break;
        case 504:
          ElMessage.error("网络超时");
          break;
        default:
          ElMessage.error("请求失败");  

         }   else {
                  if(JSON.stringify(error).includes('timeout'))  {
                       error.code = 'TIMEOUT';
                       error.message='服务器响应超时'

                  }
    
            }
        return Promise.reject(error);
  
    }
)


//4.配置全局loading
let loadCount = 0;
let loadingInstance = ref(null)

//加载loading
const addLoading = () =》{
    loadCount++;
    if(loadCount == 1) {
         loadingInstance.value = ElLoading.service({
              fullscreen:false,
              text:'请求中...',
              background: 'rgb(0,0,0,0)'
         })
   }
}      

//取消加载loading
const cancelLoading = () =>{
    loadCount--;
    if(loadCount==0) {
        loadingInstance.value.close();    
   }
}    

//超出axios实例
export default instance;                                                            `                                                                                

　　2.3  封装常用的http请求

其实就是先引入 axios 实例，然后将 axios 的几种常用网络请求封装成 Promise 并返回。

import instance from './axios'

const post = (url, data) => {
return new Promise((resolve,reject)=>{
 instance.post(url,data).then((res)=>{resolve(res)}).catche(err=>reject(err)) ;

});
};

const get = (url, data) => {
    return new Promise((resolve, reject) => {
        instance
            .get(url, { params: data })
            .then((res) => {
                resolve(res);
            })
            .catch((err) => {
                reject(err);
            });
    });
};



const put = (url, data) => {
    return new Promise((resolve, reject) => {
        instance
            .put(url, data)
            .then((res) => {
                resolve(res);
            })
            .catch((err) => {
                reject(err);
            });
    });
};


const del = (url, data) => {
    return new Promise((resolve, reject) => {
        instance
            .delete(url, { params: data })
            .then((res) => {
                resolve(res);
            })
            .catch((err) => {
                reject(err);
            });
    });
};


export default {
　　post,
　　get,
　　put,
　　del
}

　　

2.4 开发接口

在 /src/api 文件夹下新建接口文件

import http from "../utils/http";
// 用户登录
const login = (data) => {
  return http.post("/index/user/login", data);
};
export default { login }

　　

3.请求案例

import userApi from '../api/user'

//登录
const onSubmit =  async () =>{
   const   res = await userApi.login(from);
   if(res.data.code == 200) {

  } else {
      Elmesage.error(res.data.message)
  }  
 
}