只是一个小模板, 需要什么后续去根据业务添加
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/>'
- })
具体页面实现中的看 es6/es7 的 promise 这篇写法
来源: http://www.qdfuns.com/note/33603/e459221c2c5ec6500e06f3a100abc677.html