Vue封装ajax请求的函数（axios）

使用过Vue的都知道，在vue的项目中，实现前后端交互是通过resource或者axios，而相比之中axios是使用比较多的一种。在学习的过程中，学习了解了axios的使用方法之后，进而学习了如何把ajax封装成一个方法，然后在使用中，直接调用相应的函数就方便的多了。

axios的安装

cnpm install axios --save 

axios基本使用 

import axios from 'axios'     //引入axios

let promise

promise = axios.get(拼接好的url)     //get请求方式

promise = axios.post(url,data)     //post请求方式

promise.then(function (response) {

//成功函数

}).catch(function (error) {

//失败函数

})

首先是引入axios，向外暴露一个叫做ajax的函数，传入三个参数，请求的地址url，对象类型的data和默认为get的请求方式type，相信这些大家都知道，然后直接返回的是一个promise对象，这样的好处就是可以直接了当的通过函数拿到返回信息的data，更加方便，具体代码如下。

import axios from 'axios'
export default function ajax(url,data={},type='GET') {
  return new Promise(function (resolve,reject) {
    let promise
    if(type==='GET'){
      let dataStr = ''
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if(dataStr!==''){
        dataStr = dataStr.substring(0,dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
        promise = axios.get(url)
      }else {
        promise = axios.post(url,data)
      }
    }
    promise.then(function (response) {
      resolve(response.data)
    }).catch(function (error) {
      reject(error)
    })
  })
}