vue2配置axios接口文件

项目正常跑起来后，现在就开始与后台联调接口的配置问题，也就是数据传输需要的接口配置。vue本身是不支持ajax接口请求的，所以我们需要安装一个接口请求npm包。开始新手上手建议使用superagent这个工具，具体介绍请看文档，以前的vue项目通常是用vue-resource，但是vue-resource文档不再跟新，也就是说vue-resource API的封装方法已经不再对新的框架支持，所以不建议再使用，目前比较流行的axios这个工具，本身axios已经做好了优化和封装，但是对应不同的项目，还是需要做一些修改，以便兼容不同项目需求，以下是大部分项目需要的封装格式

首先安装axios工具，执行命令:npm install axios 或者使用淘宝镜像 cnpm install axios

在已经搭好的项目文件中新建一个api文件，最好是放在src文件夹或者config文件夹下，配置内容如下

// 配置API接口地址
var root = process.env.API_ROOT;
// 在root(根目录路径中后面的等号是你在dev.env.js和prod.env.js文件中所连接的后台接口，
如API_ROOT: '"https://www.baidu.com/"',)
// 引用axios
import axios from 'axios';
var axios = require('axios')
// 自定义判断元素类型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://* 的接口，如果是其他接口
 需要根据接口的参数进行调整。参考说明文档地址：
 https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
 主要是，不同的接口的成功标识和失败提示是不一致的。
 另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
 */

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,
    baseURL: root,
    withCredentials: false
  })
    .then(function (res) {
      if (res.data.success === true) {
        if (success) {
          success(res.data)
        }
      } else {
        if (failure) {
          failure(res.data)
        } else {
          window.alert('error: ' + JSON.stringify(res.data))
        }
      }
    })
    .catch(function (err) {
      let res = err.response
      if (err) {
        window.alert('api error, HTTP CODE: ' + res.status)
      }
    })
}

// 返回在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)
  }
}
api文件配置好以后，在main.js文件引入api.js文件，在配置好的原始文件中添加
// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api
形如：
import Vue from 'vue'
import App from './App'
import router from './router'

// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

over,thanks

vue2配置axios接口文件

猜你喜欢