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)
        })
    })
}

猜你喜欢

转载自blog.csdn.net/qq_41000974/article/details/104008435