js axios 简单封装

http.js文件
import axios from 'axios'
import { Toast } from 'vant';
import $router from '@/router/router'

axios.interceptors.request.use(
    (config) => {
        let tokenInfo = JSON.parse(localStorage.getItem("storageToken"));
        if(tokenInfo){
            config.headers[tokenInfo.tokenName] = tokenInfo.tokenValue
        }
        return config
    },
    (error) => {
      console.log(error) 
      return Promise.reject(error)
    }
  )

//http响应拦截器
axios.interceptors.response.use(data => { //请求后的处理

    
    if(data.data.status != "success") {
        Toast.fail(data.data.message);
        return Promise.reject(data.data);  

    }else{
        return Promise.resolve(data.data);   
    }
    
}, error => {
    const errorInfo = error.response.data;
    Toast.fail(errorInfo.message);
    if (error.response.status==401) {
        Toast.fail("登录已失效，请重新登录！");
        $router.replace({ path: '/login' })
        return Promise.reject(res)
    }
    if (error.response.status==504) {
        Toast.fail("网络请求超时，请稍后重试！");
        return Promise.reject(res)
    }
    
    
    return Promise.reject(error.response.data)
})

export default axios

api.js文件
import axios from 'axios'
export function ResetMessage(mobile){
  return axios({
    method: 'POST',
    url: `/farm-market-api/merchant/merchant-user-account/reset-password/`+mobile+`/sms`,
  })
}

使用文件
import { ResetMessage,ResetPassword } from "@/request/loginApi.js";
ResetMessage(userPhone.value).then((res) => {
      if(res){
        Toast.success('验证码发送成功');
        isSmsSend.value = true
        countDown()
      }
    })
    .catch((error) => {
      
    })
    .finally((end) => {
    });

上传axios文件
import axios from 'axios'
import { Toast } from 'vant';


function createRequest(config) {
  /**
   * 创建 axios 实例
   */
  const instance = axios.create({
    baseURL: '',
    timeout: 1000 * 5,
    transformRequest: [
      (data, headers) => {
        if (headers['Content-Type']?.includes('form-data')) {
          return data;
        }
      },
    ],
  });

  /**
   * 请求拦截器
   */
  instance.interceptors.request.use(
    (config) => {
      let tokenInfo = JSON.parse(localStorage.getItem("storageToken"));
      if (tokenInfo) {
        config.headers[tokenInfo.tokenName] = tokenInfo.tokenValue
      }
      return config
    },
    (error) => {
      console.log(error) // for debug
      return Promise.reject(error)
    }

  );

  /**
   * 响应拦截器
   */
  instance.interceptors.response.use(data => { //请求后的处理
    if (data.data.status != "success") {
      Toast.fail( data.data.message);
    }
    return data.data
  }, error => {
    const errorInfo = error.response.data;
    Toast.fail(errorInfo.message);
    // Toast.clear();
    if (!error.response) {
      let res = {
        code: -1,
        msg: '网络断开了，请检查网络状况。'
      }
      return Promise.reject(res)
    }

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

  return new Promise((resolve, reject) => {
    instance
      .request(config)
      .then((res) => {
        resolve(res);
      })
      .catch((e) => {
        reject(e);
      });
  });
}

const defRequest = createRequest;


export function upLoadImg(postdata) {
  return defRequest({
    url: `/farm-market-api/merchant/merchant-goods/image`,
    method: 'post',
    data: postdata,
    headers: { 'Content-Type': 'multipart/form-data' },
  });

}

export function upBusinessImg(postdata) {
  return defRequest({
    url: `/farm-market-api/merchant/merchant-info/business-license-image`,
    method: 'post',
    data: postdata,
    headers: { 'Content-Type': 'multipart/form-data' },
  });

}


export function upLoadHealthCode(postdata) {
  return defRequest({
    url: `/farm-market-api/merchant/purchase-entry-reg-personnel/health-code-image`,
    method: 'post',
    data: postdata,
    headers: { 'Content-Type': 'multipart/form-data' },
  });
}

export function upLoadTripCode(postdata) {
  return defRequest({
    url: `/farm-market-api/merchant/purchase-entry-reg-personnel/trip-code-image`,
    method: 'post',
    data: postdata,
    headers: { 'Content-Type': 'multipart/form-data' },
  });
}

export function upLoadNucleicAcidProve(postdata) {
  return defRequest({
    url: `/farm-market-api/merchant/purchase-entry-reg-personnel/nucleic-acid-prove-image`,
    method: 'post',
    data: postdata,
    headers: { 'Content-Type': 'multipart/form-data' },
  });
}

上传文件使用
import { upBusinessImg } from "@/request/UploadFile.js";
function afterCard(file) {
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
    duration: 0,
    forbidClick: false,
  });
  const formData = new FormData();
  formData.append("image", file.file);
  upBusinessImg(formData).then((res) => {
    imgVal.value = res.data.imageUrl
    
  })
  .catch((error) => {
  
  }).finally((end) => {
    closePopUp();
  });
}