vue axios 的简单封装

一、说明

1. axios的安装使用：
   axios和vue-axios的关系 - (jianshu.com)

2. 项目结构：

   
   
   image.png

二、贴源码

http.js：

// 1.首先引入 axios
import axios from 'axios'

// 2.创建一个实例
const api = axios.create({
    baseURL: 'http://localhost:8081', // 请求的公共地址部分
    timeout: 3000 // 请求超时时间 当请求时间超过5秒还未取得结果时 提示用户请求超时
})

// 3axios的拦截器
// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
    // config 请求的信息
    return config // 将配置完成的config对象返回出去 如果不返回 请求则不会进行
}, err => {
    // 请求发生错误时的处理 抛出错误
    Promise.reject(err)
})

// 4.response
api.interceptors.response.use(res => {
    // 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
    // res 是所有相应的信息
    console.log(res)
    return Promise.resolve(res)
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})

// 5.暴露api
export default api

mortgateApi.js：

// 6.封装接口
import api from './http';

//下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = (params) => api.get(`/mortgage/cal/debx`, { params});
export const postXXX = (params) => api.post(`/mortgage/cal/debx`, params)

// 下面是详细的写法
export const test = (params) => api({
    url: '', // 请求地址
    method: 'post', // 请求方式
    // data: params, // (一般post请求，我们习惯使用 data属性来传参)
    params: params //(一般get请求，我们习惯使用params属性来传参）
    // 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
})

MortgageForm.vue：（部分代码）

import {getXXX } from "../api/mortgageApi.js";

methods: {
    onSubmit() {
      var params = {
        principal: this.form.principal,
        year: this.form.year,
        rate: this.form.rate,
        calDetail: this.form.calDetail,
      };
      let promise = getXXX (params);
      promise.then(res=>{
        console.log('res:',res);
      }).catch(err=>{
        console.log('err:',err);
      });
  }
}

————————————————
版权声明：本文为CSDN博主「周一1212」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60531448/article/details/124037621