封装axios，这篇博客一定很有用？

axios都知道是vue2的ajax，有点不专业，但你是可以理解的；

但是只知道单纯的和ajax使用，那就未免太浅了，更别说自己都工作这么些年份了；

目录结构吗？

 src

    -api

      --api.js

      --http.js

只要你熟悉vue这个还用说，可以看着axios和vuex的官方文档自己动手封装下哈；

以下是api.js的内容，这里填写的是项目的URL字段请求地址；认真备下课，有es6的内容；解构赋值可能会在后续的更新中说明；这里把接口文档统一归类，方便后续项目升级维护；

const Api= {
    getLocation: {
      url: '/api/about/list/gos',
      method:'get'
    },
    sendDATA: {
        url: '/api/admin/list',
        method:'post'
      }
  }
 
   
  export default Api

接下来是http.js,动手了，敲打键盘，看着官方文档一起来封装，哈哈，我这只是个入门的文案哦，后续的看个人的理解了，加油，同学们；

import axios from 'axios';
import qs from 'qs';
axios.defaults.baseURL = '服务器或者你项目的后台接口地址';
axios.defaults.timeout = 5000;
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 
axios.interceptors.request.use(config => {
  // loading
  return config
})
axios.interceptors.response.use(function (res) {
    // Do something with response data
    return res;
  }, function (error) {
    // Do something with res error
    return Promise.reject(error);
  });
const fetch= (opts, data) => {
    let httpDefaultOpts = { //http默认配置
          method:opts.method,
          url: opts.url,
          timeout: 10000,
          params:data,
          data:qs.stringify(data),
          headers: opts.method=='get'?{
            'X-Requested-With': 'XMLHttpRequest',
            "Accept": "application/json",
            "Content-Type": "application/json; charset=UTF-8"
          }:{
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
    }
 
    if(opts.method=='get'){
      delete httpDefaultOpts.data
    }else{
      delete httpDefaultOpts.params
    }
    
    let promise = new Promise(function(resolve, reject) {
      axios(httpDefaultOpts).then(
        (res) => {
          resolve(res)
        }
      ).catch(
        (response) => {
          reject(res)
        }
      )
 
    })
  return promise
}
export default fetch;

完毕，虽然我起的名字有点洋气，但是不要沉醉呦；fetch也是可以在vue中用的哦！大家下去可以自学下，挺不错的；

后续我会把axioas的登录拦截和在vuex中具体使用说下，敬请更新；

页面http调用

<script>
import http from "../../api/http.js";
import Api from "../../api/api.js";
export default {
  created: function() {
    http(Api.getLocation)
    .then((res)=>{
      console.log(res)
    },(error)=>{
      console.log(error)	
    })
   },
  methods: {
  
  }
}
</script>