vue.js

vue封装axios的api

2019-04-09  本文已影响8人  紫痕蓝羽

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/>'

})

上一篇 下一篇

猜你喜欢

热点阅读