vue封装axios的api
api/request.js
import axios from 'axios'
const instance = axios.create({
baseURL: "www.bai.com/",
timeout: 1000,
})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// console.log('我是拦截器',config)
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
// console.log('我是响应器',response)
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function fetch(url,params={}){
return new Promise((resolve,reject) => {
instance.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url,data={}){
return new Promise((resolve,reject)=>{
instance.post(url,data)
.then(response=>{
// console.log("我是封装的",response.data);
resolve(response.data)
},err=>{
reject(err)
})
})
}
export default instance
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
import {post,fetch,patch,put} from './api/request'
//定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
