在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
