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
// });


//添加请求拦截器，会在发起请求之前执行相应的需求
axios1.interceptors.request.use(function (config) {
    // console.log('我是请求拦截器');
    config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem("token");
    // 在发送请求之前做些什么
    return config;
  }, 
function (error) {
    // 处理响应错误
    return Promise.reject(error);
  });

// //添加响应拦截器，会在返回数据后先执行相应的需求
axios1.interceptors.response.use(function (response) {
    console.log('我是响应拦截器');
    // 处理响应数据
    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
    })
}

在业务需求中调用

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