封装axios网络请求 超好用的

新建config/axios.js config/api.js 两个文件：

axios.js 文件内容如下：

/**
 * 发送异步请求
 */
 import axios from 'axios';
 import qs from 'qs';
 import {Toast} from 'vant'
 Vue.use(Toast)

function Axios(url,data={},method = 'get'){
    var that = this;
    return new Promise((resolve,reject)=>{
        let promise;
        if(method == 'get'){
            promise = axios.get(url,{
                params:data
            })
        }else{
            promise = axios.post(url,qs.stringify(data))
        }
        Toast.loading({
            message:'加载中...',
        })
        promise.then((res)=>{
            Toast.clear()
            resolve(res.data);
        }).catch((error)=>{
            Toast(error.message)
        })
    })
}
export default Axios;

api.js 文件内容如下：

/**
 * 所有的请求接口
 */
import Axios from './axios'
const httpURL = '/wypapi';

/**登录接口
 * @param {stuNumber} 账号
 * @param {password} 密码 
 * @param {roleId} 角色  学生 教师 管理员分别是0 1 2
 */
export const reqLogin = (data) => Axios(httpURL + '/teachtool/login/loginstate',data,'POST');

/**
 * 退出登录
 */
export const reqLoginOut = () =>Axios(httpURL + '/teachtool/login/logout','POST');


/**
 * 我的，用户个人信息
 * @param {userId} 用户标识
 * sex 1  男
 */
export const reqGetUserInfo = (data) =>Axios(httpURL + '/teachtool/userinfo/findUserInfoById',data,'POST');

/**
 * 查询个人课表
 * @param {id} 用户标识，登录接口里面会返回
 */
export const reqFindLessonByUserId = (data) => Axios(httpURL + '/teachtool/lessonstable/findLessonsByUserId',data,'POST')

页面调用接口如下：

var that;
import {reqLogin} from '../config/api';
async toLoginFn() {
   that = this;
   const { username, password,radioStatus } = that;
     var params = {
       stuNumber:username,
       password,
       roleId:radioStatus
     };
     const {msg,userName,userId,status,roleId} = await reqLogin(params);
     // 解构出请求回来的数据  msg 、userName、userId、status、roleId
}