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

心已赠人 2021-10-23 23:26 640阅读 0赞

使用过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)
        })
      })
    }