vue 请求封装

import axios from 'axios'
import qs from 'qs'
// 在config.js文件中统一存放一些公共常量,方便之后维护
import API from './config.js'
const baseURL = API.baseURL
    // 添加请求拦截器,在发送请求之前做些什么(**具体查看axios文档**)--------------------------------------------
axios.interceptors.request.use(function(config) {
    // 显示loading
    return config
}, function(error) {
    // 请求错误时弹框提示,或做些其他事
    return Promise.reject(error)
})

// 添加响应拦截器(**具体查看axios文档**)----------------------------------------------------------------
axios.interceptors.response.use(function(response) {
    // 对响应数据做点什么,允许在数据返回客户端前,修改响应的数据
    // 如果只需要返回体中数据,则如下,如果需要全部,则 return response 即可
    return response.data
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error)
})

// 封装数据返回失败提示函数---------------------------------------------------------------------------
function errorState(response) {
    // 隐藏loading
    // 如果http状态码正常,则直接返回数据
    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
        // 如果不需要除了data之外的数据,可以直接 return response.data
        return response
    } else {
        console.log('数据获取错误' + response)
    }
}

// 封装数据返回成功提示函数---------------------------------------------------------------------------
function successState(res) {
    // 隐藏loading
    // 统一判断后端返回的错误码(错误码与后台协商而定)
   
}

// 封装axios--------------------------------------------------------------------------------------
function apiAxios(method, url, params) {
    let httpDefault = {
        method: method,
        baseURL: baseURL,
        url: url,
        // `params` 是即将与请求一起发送的 URL 参数
        // `data` 是作为请求主体被发送的数据
        params: method === 'GET' || method === 'DELETE' ? params : null,
        data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
        timeout: 10000
    }

    // 注意**Promise**使用(Promise首字母大写)
    return new Promise((resolve, reject) => {
        axios(httpDefault)
            // 此处的.then属于axios
            .then((res) => {
                successState(res)
                resolve(res)
            }).catch((response) => {
                errorState(response)
                reject(response)
            })
    })
}

// 输出函数getAxios、postAxios、putAxios、delectAxios,供其他文件调用-----------------------------
// Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。
export default {
    install: function(Vue) {
        Vue.prototype.getAxios = (url, params) => apiAxios('GET', url, params)
        Vue.prototype.postAxios = (url, params) => apiAxios('POST', url, params)
        Vue.prototype.putAxios = (url, params) => apiAxios('PUT', url, params)
        Vue.prototype.delectAxios = (url, params) => apiAxios('DELECT', url, params)
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未来-更美好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值