【vue+axios】简单项目的简单封装和运用

1、安装axios和qs：
vue和后台交互获取数据通常使用axios库
qs.stringify(data)可以解决data数据格式问题

npm install --save axios vue-axios qs

2、封装axios：
我是src下创建两个文件夹：api和utils
api用来放接口数据
utils用来放封装的公共方法　　

 

3、request.js：

import axios from 'axios';
const service = axios.create({
    // process.env.NODE_ENV === 'development' 来判断是否开发环境
    // easy-mock服务挂了，暂时不使用了
    // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
    timeout: 5000
});
service.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);
service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return response.data;
        } else {
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);
export default service;

4、api.js：

// api:'http://localhost:8080/swagger-ui.html'
import qs from 'qs'
import request from '../utils/request';
// 这里写个接口地址 下面直接用就行
let basurl = 'http://127.0.0.1:8080'
// 然后get/post啥的直接写就行： 
export const DeleteCourse = query => {
    return request({
        url: basurl+'/teacher/deleteCourse',
        method: 'post',
        data: query
    });
};
export const FindCourse = query => {
    return request({
        url: basurl+'/teacher/findCourse',
        method: 'get',
        params: query
    });
};

5、运用：

import {FindCourse} from '@/api/index';

async getList(){
    await FindCourse(this.searchFilter).then(res=>{
      this.tableData=res.data;
    })
},