vue 项目使用promise 二次封装axios

vue项目封装axios,使用promise二次封装,POST和PUT请求时使用qs库的qs.stringify转换data数据
首先安装axios 和 qs

npm install axios --save
npm install qs --save
/*
ajax请求函数模块
返回值: promise对象(异步返回的数据是: response.data)
 */
import router from '../router/router'
import axios from 'axios'
import qs from 'qs'
export default function ajax (url, data={}, type='GET') {
     type=type.toLocaleUpperCase()//转换成大写,兼容小写
    return new Promise(function (resolve, reject) {
        let promise
        let token=localStorage.getItem('token')
        type=type.toUpperCase()
        let headersObj={
            GET:'application/json',
            DELETE:'application/json',
            PUT:'application/x-www-form-urlencoded',
            POST:'application/x-www-form-urlencoded',
            FILE:'application/multipart-formdata'
        }
        let params={}
        let headers={
            'Content-Type': headersObj[type],
            token
        }
        if ((type === 'GET') || (type==='DELETE')) {
        //get和delete请求时将数据放入params中,delete以什么方式发送取决于和后端的约定
            params=data
        } else if((type === 'POST') || (type==='PUT')){       
           data=qs.stringify(data)         
        }else if(type === 'FILE'){
         //FILE为前端自定义类型,主要是因为普通的POST请求需要用qs库,而文件上传则不需要,所以单独做判断,最终给后端发送的时候还是POST
            type='POST'
        }else {
            console.error('请求方式错误,仅支持以下请求方式:GET,POST,DELETE,PUT,FILE')
            return
        }
        promise = axios({
            url,
            data,
            params,
            method:type,
             baseURL:'https://exzample.com',//
            headers,
            withCredentials:true
        })
        promise.then(function (response) {
            let {ret,msg}=response.data
            //这里和后端约定返回-2为未登录,直接跳转到登录页面
            if(ret===-2){
                alert(msg)
                router.replace('/login')
                return
            }
            resolve(response.data)//直接返回data
        }).catch(function (error) {
            reject(error)
        })
    })
}
发布了3 篇原创文章 · 获赞 2 · 访问量 133
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览