【vue】vue-cli 2.x -- 接口封装(3)

接口封装：

一、src文件夹下创建一个api文件夹（自定义文件夹名），创建一个index.js(可自定义)

二、index.js内容如下：


// 引用路由
import route from "../router/index.js"

// 配置API接口地址
// var root = 'https://cnodejs.org/api/v1'
var root = 'api'

// 引用axios
var axios = require('axios')

// 把Request PayLoad 转成 Form Data
var qs = require('qs')

// 自定义判断元素类型JS
function toType (obj) {
  return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
  for (var key in o) {
    if (o[key] === null) {
      delete o[key]
    }
    if (toType(o[key]) === 'string') {
      o[key] = o[key].trim()
    } else if (toType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (toType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}
/*
  接口处理函数
  这个函数每个项目都是不一样的，我现在调整的是适用于
  https://cnodejs.org/api/v1 的接口，如果是其他接口
  需要根据接口的参数进行调整。参考说明文档地址：
  https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
  主要是，不同的接口的成功标识和失败提示是不一致的。
  另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
*/

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers['Auth-Token'] = localStorage.getItem('Auth-Token');
  // console.log(config)
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // console.log(response)
  return response;
}, function (error) {
  // console.log(11111)
  console.log(error.response)
  if (error.response.status == 401) {
    localStorage.clear();
    window.location.href = '/';
  }
  // 对响应错误做点什么
  return Promise.reject(error);
});

function apiAxios (method, url, params, success, failure) {
  if (params) {
    params = filterNull(params)
  }
  axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,

    // 允许请求的数据在传到服务器之前进行转 把Request PayLoad 转成 Form Data
    transformRequest: [function (params) {
        // return qs.stringify(params, {arrayFormat: 'brackets'});
        return qs.stringify(params)
    }],

    // 自定义的要被发送的头信息
    headers:{
        'Content-Type':'application/x-www-form-urlencoded; chartset=UTF-8'
    },

    baseURL: root,

    //　是否跨域请求
    withCredentials: false
  })
  
  .then(function (res) {
    if(res.data.errCode == 0){
      if(success){
        success(res.data)
      }
    }else{
      if(failure){
        failure(res.data)
      }
    }

  })
  .catch(function (err) {
    
  })
}  

// 上传图片
function uploadApiAxios (method, url, params, success, failure) {
  if (params) {
    params = filterNull(params)
  }
  axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,

    // 允许请求的数据在传到服务器之前进行转 把Request PayLoad 转成 Form Data
    transformRequest: [function (params) {
        // return qs.stringify(params, {arrayFormat: 'brackets'});
        return params
    }],

    // 自定义的要被发送的头信息
    headers:{
        'Content-Type':'multipart/form-data'
    },

    baseURL: root,

    //　是否跨域请求
    withCredentials: false
  })
  
  .then(function (res) {
    if(res.data.errCode == 0){
      if(success){
        success(res.data)
      }
    }else{
      if(failure){
        failure(res.data)
      }
    }

  })
  .catch(function (err) {
    
  })
}  

// 返回在vue模板中的调用接口
export default {
  get: function (url, params, success, failure) {
    return apiAxios('GET', url, params, success, failure)
  },
  post: function (url, params, success, failure) {
    return apiAxios('POST', url, params, success, failure)
  },
  put: function (url, params, success, failure) {
    return apiAxios('PUT', url, params, success, failure)
  },
  delete: function (url, params, success, failure) {
    return apiAxios('DELETE', url, params, success, failure)
  },
  // 上传图片
  uploadPost: function (url, params, success, failure) {
    return uploadApiAxios('POST', url, params, success, failure)
  }
}

三、api文件夹下再创建一个uri文件夹用于放页面接口
    看个人习惯，可创建可不创建、我是每个页面的都创建一个js、方便查找
    
1、先创建一个url.js 进行管理页面的接口,内容如下：

// 登录
import login from './login.js'

let allUrlList = Object.assign(
    {},login
);
export default allUrlList


然后去 main.js里声明,如下：

// 引用API文件
import url from './api/url/url.js'

// 将API方法绑定到全局
Vue.prototype.$http = url

2、开始创建接口封装页面，
    例如login.js

import axios from "../index.js"

var login = {
    
    // 登录
	login:function(data,success,failure){
		return axios.post("/backend/login",data,success,failure);
	},

}

export default login

3、去页面调用接口
    
    this.$http.login(data,(res)=>{
        //　成功返回
                    
     },(errRes)=>{
 
       //　错误返回
       this.$message.error(errRes);
    })