VUE：axios二次封装

适用于vue项目中管理接口

说明：

• 需要创建的文件
• 具体思路
• 方法步骤

需要创建的文件

• src/assets/js/request/api.js
• src/assets/js/request/request.js

具体思路

• 引入axios
• 封装axios.js
• 接口统一管理api.js

方法步骤

• 引入axios

    npm i aixos --save

• 封装axios（文件名：request.js）

import axios from 'axios';
const http = "http://192.168.1.12";
//请求拦截
axios.interceptors.request.use((config) => {
    //请求之前重新拼装url
    config.url = http + config.url;
    return config;
});
axios.interceptors.response.use(
    (res) => {
        // 对响应数据做些什么
        return res;
    },
    (err) => {
        // 对响应错误做些什么
        return Promise.reject(err.response);
    }
);

class Axios {
    request({
        url,
        data = {},
        method = 'GET',
        responseType = ''
    }) {
        return new Promise((resolve, reject) => {
            this._request(url, resolve, reject, data, method, responseType);
        });
    }
    _request(url, resolve, reject, data = {}, method = 'GET', responseType = '') {
        let format = method.toLocaleLowerCase() === 'get' ? 'params' : 'data';
        //测试token
        axios({
            url,
            responseType,
            method,
            [format]: data,
            timeout: 5000,
            headers: {
                'content-type': 'application/json',
                Authorization: "Bearer" + localStorage.getItem('token'),
            },
        })
            .then((res) => {
                if (res.status.toString().startsWith('2')) {
                    resolve(res);
                } else {
                    reject(res);
                }
            })
            .catch((err) => {
                reject(err);
            });
    }
    uploader({
        url,
        file
    }) {
        return new Promise((resolve, reject) => {
            this._uploader(url, resolve, reject, file);
        });
    }
    _uploader(url, resolve, reject, file) {
        axios
            .post(url, file, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    Authorization: localStorage.getItem('token') || '',
                },
            })
            .then((res) => {
                resolve(res);
            })
            .catch((err) => {
                reject(err);
            });
    }
}
export {
    Axios
};

• 接口统一管理封装（文件名：api.js）

import { Axios } from './axios'

class ApiModel extends Axios {
    // 授权获取token
    getAuthorizations(data) {
        return this.request({
            url: '/api/wechat/authorizations',
            method: 'POST',
            data,
        })
    }
    // 图片上传
    images(file) {
        return this.uploader({
            url: '/api/images',
            method: 'POST',
            file,
        })
    }
    // 获取当前登录的用户信息
    getUserInfo() {
        return this.request({
            url: '/api/me',
            method: 'GET',
        });
    }
    //获取风险评估详情
    getAdviseDetails(data) {
        return this.request({
            url: '/api/adviseDetails',
            method: 'GET',
            data
        })
    }
    // 删除地址
    deleteAddress(data) {
        return this.request({
            url: "/api/deleteAddress",
            method: "DELETE",
            data
        })
    }
}

export { ApiModel }

• 实际使用

<script>
import { ApiModel } from "../../assets/js/request/api"
const apimodel = new ApiModel();
export default {
  data() {
    return {
      dataList:[],
    };
  }
  methods: {
    adviseDetails() {
      let data = {
        record_id: this.recordid,
      };//需要传的数据
      apimodel.getAdviseDetails(data)
      //成功返回的数据
      .then((res) => {
        this.dataList = res.data.data;
      })
      //错误返回的数据
      .catch((err)=>{
          err;
      });
    },
  },
};
</script>