vue使用promise封装axios

前言：在vue项目中我们经常会使用axios去请求后台数据做交互，今天整理了一下怎么使用promise去封装axios，方便我们管理。

在根目录下创建utils文件夹
在utils里创建两个js文件

文件1： index.js

import Axios from "axios";
class Http {
    //request 方法
    request(params) {
        return new Promise((resolve, reject) => {
            Axios({
                method: params.type || "get",
                url: params.url,
                data: params.data,
                headers: params.headers
            })
                .then(res => {
                    if (res.data.code === 0) {
                        resolve(res);
                    } else {
                        console.log(res.data.msg);
                    }
                })
                .catch(err => {
                    reject(err.statusText); //失败
                    console.log('网络异常'); 
                });
        });
    }
}
export default Http;

文件2：axios.js

import Http from './index.js'
const http = new Http();

export default class beg {
    //shopList 为自定义方法名
    //不传值渲染
    shopList() {
        return http.request({
            url: `https://api.it120.cc/small4/banner/list`,
            type:'get'
        })
    }
    //传值获取 例：
    shopId(id) {
        return http.request({
            url: `https://api.it120.cc/small4/shop/goods/detail/?id=${id}`,
            type:'post'
        })
    }
    
}

具体某个vue模块使用

import axios from '../utils/axios.js';
let Axios = new ajax();

mounted(){
    Axios.shopList().then(res => {
      console.log(res.data);
    });
}

附：axios安装

cnpm i axios

main.js引入

import axios from 'axios'
Vue.prototype.$axios = axios

直接粘贴复制即可，通用的，哪里不懂得、有错误的留言讨论纠正~~~

end