vue项目封装axios

  还是直奔主题吧，因为官方不推荐使用vue-resource，而是推荐axios，所以这篇文章分享给大家我在自己的项目里如何封装axios，虽说将axios在main.js里写入Vue的原型链作为Vue的属性（Vue.prototype.$http = axios），直接用最原始的方法也能进行请求

this.$http.get('/user',{  params:{    ID:12345  }}).then(function(response){  console.log(response);}).catch(function(err){  console.log(err);});

  这样也不是说不可以，但是真的在开发工作中，因为要统一设置请求的拦截，错误的处理，所以封装axios是十分必要的。
  首先这是我src下api的目录

  这是apiUrl.js，将我们的请求名称和url以及方法放在这里

export default {  login_in: { url: '/login', method: 'get' },  getUserList: { url: '/user/list', method: 'get' }}

  重点在于我们的apiUtil.js

import axios from 'axios'import { Toast } from 'mint-ui'const generateApiMap = (map) => {  let facade = {}  _.forEach(map, function (value, key) {    facade[key] = toMethod(value)  })  return facade}const toMethod = (options) => {  options.method = options.method || 'post'  return (params = {}, attachedParams, config = {}) => {    params = _.extend(params, attachedParams)    return sendApiInstance(options.method, options.url, params, config)  }}// 创建axios实例const createApiInstance = (config = {}) => {  const _config = {    withCredentials: true, // 跨域    baseURL: ''  }  config = _.merge(_config, config)  return axios.create(config)}const err_check = (code, message, data) => {  if (code ==200){    return true  }  return false}const sendApiInstance = (method, url, params, config = {}) => {  if(!url){    return  }  let instance = createApiInstance(config)  instance.interceptors.response.use(response => {    let {code, message, data} = response.data    if (err_check(code, message, data) && data) {      return Promise.resolve(data)    } else {      return Promise.reject(data)    }  },  error => {    Toast({      message: error.response || error.message,      duration: 3000    })    return Promise.reject(error).catch(res => {        console.log(res)      })  }  )  if (method === 'get') {    params = {      params: params    }  }  return instance[method](url, params, config)}export default {  generateApiMap}

  紧接着是index.js

import apiUrl from './apiUri'import apiUtil from './apiUtil'const generateApiMap = apiUtil.generateApiMap({...apiUrl})export default {  ...generateApiMap // 取出所有可遍历属性赋值在新的对象上}

  可以看出来整体的想法就是在apiUrl.js里面只放请求名称以及url和请求方法，然后再apiUtil.js里面去将其转换为相应的方法，首先是在index.js里面调用generateApiMap，遍历我们的apiUrl将其中每个对象转换为方法，也就是toMethod要做的事，紧接着在sendApiInstance里去创建我们的axios实例，并设置拦截器（我只做了返回拦截），到return instance[method](url, params, config)这一步也就将我们的请求封装成功，下面是在页面调用的时候

  封装axios的方式有很多种，每个人的代码习惯也不一样，此处也只是给大家一个参考