Vue API接口封装

在src中创建文件夹api

config.js: http请求的基础配置
http.js http请求接口配置

config.js

import axios from 'axios'

// 给所有axios请求设置基础的域名
// axios.defaults.baseURL = 'http://localhost:3000'


//用axios.create可以创建axios的实例，允许不同实例有不同配置
const axios1 = axios.create({
    baseURL: 'http://localhost:3000',
    // 请求超时的时间
    timeout: 5000
}); 
// const axios2 = axios.create({
//     baseURL: 'http://www.test.com',
//     timeout: 5000
// });
export default axios1

http.js

 import axios1 from './config'

//查询图书
export function selectBook() {
    return axios1({
        url: '/book',
        method: 'get'
    })
}

// 添加图书
export function addBook(data) {
    return axios1({
        url: '/book',
        method: 'post',
        data
    })
}

// 修改图书
export function editBook(data) {
    return axios1({
        url: '/book',
        method: 'put',
        data
    })
}
//删除图书
export function delBook(params) {
    return axios({
        url: '/book',
        method: 'delete',
        params
    })
}

在业务需求中调用

import {selectBook} from '@/api/http';
......
//获取初始化数据
getBookData() {
    selectBook()
    .then((res) => {
    this.book = res.data.list;
    })
    .catch((err)=>{
    console.log(err);
    })
},

也可以用async和await来优化代码

async getBookData() {
    try {
    let res = await selectBook();
    this.book = res.data.list;
    }catch(err){
    console.log(err);
    }
},

注意： main.js中不需要再引入axios, Vue的原型也不需要添加axios