在src中創(chuàng)建文件夾api

config.js: http請求的基礎(chǔ)配置
http.js http請求接口配置

config.js

import axios from 'axios'

// 給所有axios請求設(shè)置基礎(chǔ)的域名
// axios.defaults.baseURL = 'http://localhost:3000'


//用axios.create可以創(chuàng)建axios的實例，允許不同實例有不同配置
const axios1 = axios.create({
    baseURL: 'http://localhost:3000',
    // 請求超時的時間
    timeout: 5000
}); 
// const axios2 = axios.create({
//     baseURL: 'http://www.test.com',
//     timeout: 5000
// });


//添加請求攔截器，會在發(fā)起請求之前執(zhí)行相應(yīng)的需求
axios1.interceptors.request.use(function (config) {
    // console.log('我是請求攔截器');
    config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem("token");
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// //添加響應(yīng)攔截器，會在返回數(shù)據(jù)后先執(zhí)行相應(yīng)的需求
axios1.interceptors.response.use(function (response) {
    console.log('我是響應(yīng)攔截器');
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    console.log('error',error.status);

    return Promise.reject(error);
  });
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
    })
}

在業(yè)務(wù)需求中調(diào)用

import {selectBook} from '@/api/http';
......
//獲取初始化數(shù)據(jù)
getBookData() {
    selectBook()
    .then((res) => {
    this.book = res.data.list;
    })
    .catch((err)=>{
    console.log(err);
    })
},

也可以用async和await來優(yōu)化代碼

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

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