axios的封裝及使用1

npm install axios --save

**新建http.js**
import axios from 'axios';
// import qs from 'qs'
// import { Message } from 'element-ui';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='http://114.115.118.153:8080/'


//http request 攔截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名稱');注意使用的時候需要引入cookie方法，推薦js-cookie
    // config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded'
    }
    // if(token){
    //   config.params = {'token':token}
    // }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 攔截器
axios.interceptors.response.use(
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//從哪個頁面跳轉
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封裝get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.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) => {
//     axios.post(url,data)
//       .then(response => {
//         resolve(response.data);
//       },err => {
//         reject(err)
//       })
//   })
// }
export function post(url, params) {
  return axios.post(url, params, {
    transformRequest: [(params) => {
      let result = ''
      Object.keys(params).forEach((key) => {
        if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
          result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
        }
      })
      return result
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

/**
 * 封裝patch請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
      .then(response => {
        resolve(response.data);
      },err => {
        reject(err)
      })
  })
}

/**
 * 封裝put請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data)
      .then(response => {
        resolve(response.data);
      },err => {
        reject(err)
      })
  })
}

**main.js**
//引入http.js開始
import axios from 'axios'
import {post,fetch,patch,put} from './http'
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
//引入http.js

**組件調用:
post請求：**
 this.$post('login', {
            username: this.username,
            password: this.password,
          })
            .then((r) => {
            }）
  **get請求**
  this.$fetch('org/findbyWx',{
        openId:localStorage.getItem('openId')
      }).then((r) => {
        console.log(r);
      })