vue axios封装以及使用

axios封装

下载：npm install -S axios
可以在src目录下创建一个文件夹
在里面写入封装好的js文件
操作如下：

---

api.js里面存放封装的axios代码如下：

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000'
function tGet(url, params) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url,
            params,
        })
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

function tPost(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url,
            data,
        })
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

function tFormPost(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url,
            data,
            transformRequest: [
                function(data) {
                    let ret = ''
                    ret = Qs.stringify(data)
                    return ret
                },
            ],
            headers: {
                'Content-Type':
                    'application/x-www-form-urlencoded;charset=utf-8',
            },
        })
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

function tPut(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .put(url, params)
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

function tDel(url) {
    return new Promise((resolve, reject) => {
        axios
            .delete(url)
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}
export { tGet, tPost, tFormPost, tPut, tDel }

---

使用

在vue页面的script标签中引入

import { tGet, tPost, tFormPost, tPut, tDel} from ' ../ajax/api'

tGet, tPost, tFormPost, tPut, tDel 需要什么方式引入什么方式,例如：

import { tGet} from ' ../ajax/api' 

可以直接这么引入一个
写页面的画就不用写 ‘http://localhost:3000’ 协议，域名与端口号了。

tGet('/login',{
      data:data      //这里为需要传的参数
}).then((res)=>{
    console.log(res)    //成功为这里的值
}).catch((err)=>{
      console.log(err)     //失败为这里的值
})