vue 中 require.js 的封装

最新推荐文章于 2025-01-03 16:03:40 发布

原创最新推荐文章于 2025-01-03 16:03:40 发布 · 548 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了如何使用axios库封装HTTP请求，包括GET和POST方法，并实现请求和响应拦截器来处理请求前后的操作。文章还展示了如何设置请求头、超时时间和处理token的自动携带，以及响应数据的状态码判断。

请求拦截器和响应拦截器，以及 get 和 post 请求的封装

import axios from "axios";
import qs from "qs";
import store from "../store"

axios.defaults.baseURL="http://localhost:8081"
// var baseURL="http://localhost:5050"
//设置超时时间
axios.defaults.timeout = 10000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.withcredentials = true

//请求拦截(请求发出前处理请求)
axios.interceptors.request.use((config) => {
    //在发送请求之前如果为post序列化请求参数
    if (config.method === 'post') {
      // config.data = qs.stringify(config.data);
      config.data = config.data;
    }
    if(localStorage.getItem("token")){
        config.headers.token=localStorage.getItem("token");
      }
    if(sessionStorage.getItem("token")){
        config.headers.token=sessionStorage.getItem("token");
      }
    return config;
  }, (error) => {
    return Promise.reject(error);
  });

// 响应拦截器（处理响应数据）
axios.interceptors.response.use((res) => {
    console.log("触发响应拦截器...")
    if(res.data.status==403){
      localStorage.removeItem("token");
      sessionStorage.removeItem("token");
    }else if(res.data.code==-1){
      console.log(55)
      store.commit("setIslogin",false);
      store.commit("setUname","");
      alert(res.data.msg+" 请先登录 !");
    }else if(res.data.token){
      store.commit("setIslogin",true);
      if(res.remember==="true"){
        localStorage.setItem("token",res.data.token);
      }else{
        sessionStorage.setItem("token",res.data.token);
      }
    }
    return res;
  }, (error) => {
    return Promise.reject(error);
  });
// 封装get方法
function get(url, params){
    return new Promise((resolve, reject) =>{
        axios.get(url, params).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data);
        })
    });
}

// 封装post方法
function post(url, params){
    return new Promise((resolve, reject) =>{
        axios.post(url, params).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data);
        })
    });
}

//对外接口
export function request({method, url, data}){
    if(method == 'get'){
        return get(url, data);
    } else if (method == 'post') {
        return post(url, data);
    }
}

export default {
    install(Vue) {
    Vue.prototype.axios = axios;
    Vue.prototype.$request = function () {
            return request;
        }
    }
}