vue之axios封裝

本想使用axios，但不封裝的話，使用起來太臃腫，此封裝方式是根據別人封裝格式改造過來使用，地址在最下面。

1.axios安裝：

npm install axios -D

2.封裝axios，index.js

/** 接口調用工具*/

import axios from 'axios'  引用axios
// 配置API接口地址
var root = 'http://localhost:7002'
axios.defaults.headers.post['content-Type'] = 'application/json;charset=UTF-8';

// 自定義判斷元素類型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
}
/**添加headers,能夠動態添加header參數*/
function setHeaders(headers){
  axios.defaults.headers.school_id = headers.school_id;
  axios.defaults.headers.token = headers.token;
}


//其實success與failure這兩個參數，傳過來的是兩個放方法
function apiAxios (method, url,headers, params, success, failure) {
  if (headers){
    headers = filterNull(headers);
    setHeaders(headers)
  }

  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.error_code === 1000) {
        if (success) {
		//使用success(data)方法
          success(res.data)
        }
      } else {
        failure(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,headers, params, success, failure) {
    return apiAxios('GET', url,headers, params, success, failure)
  },
  post: function (url,headers, params, success, failure) {
    return apiAxios('POST', url,headers, params, success, failure)
  },
  put: function (url,headers, params, success, failure) {
    return apiAxios('PUT', url,headers, params, success, failure)
  },
  delete: function (url,headers, params, success, failure) {
    return apiAxios('DELETE', url,headers, params, success, failure)
  }
}

3.在main.js全局引用封裝的axios js

import api from './api/index.js';

Vue.prototype.$api = api

4.使用例子，get請求與post請求

//get請求
this.$api.get(
   '/devices',                           //url
   {"school_id":schoolId,"token":null},  //headers
   null,                                 //params
  successRes => {                        //success(data)方法
   console.log(successRes)
  },
  failureRes =>{                        //failure(data)方法
	 console.log(failureRes)
  }
)

//post請求
this.$api.post(
   '/device', 
   {"school_id":schoolId,"token":null},
   {"name": "test","operator_name": "xichuan"}, 
   successRes => {                        
   console.log(successRes)
  },
  failureRes =>{                        
	 console.log(failureRes)
  }
})

5.get請求能夠用下面格式

//將上面的查分開來，這樣更好理解，能夠看出，最後兩個參數其實傳遞的是兩個方法，一個處理success,一個處理failure
var success = function myfun(res){
     console.log(res)
}
var failure = function myfun(res){
     console.log(res)
}
this.$api.get(
   '/devices',                           //url
   {"school_id":schoolId,"token":null},  //headers
   null,                                 //params
  success(res),                        //success(data)方法
  failure(res)                        //failure(data)方法
)

 

原文地址：https://blog.csdn.net/FungLeo/article/details/77601270