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)
        })
    })
}
对于Vue2项目二次封装axios,可以按照以下步骤进行: 1. 安装axios:在项目根目录中运行以下命令安装axios: ``` npm install axios ``` 2. 创建封装文件:在项目的src目录下创建一个api文件夹,并在该文件夹下创建一个request.js文件(或者其他你喜欢的文件名)。 3. 在request.js文件中引入axiosVue: ```javascript import axios from 'axios' import Vue from 'vue' ``` 4. 创建一个axios实例,并设置一些默认配置: ```javascript const instance = axios.create({ baseURL: process.env.BASE_URL, // 设置接口根路径,可以根据需要进行配置 timeout: 10000, // 设置请求超时时间,单位为毫秒 headers: { 'Content-Type': 'application/json' // 设置请求头部类型 } }) ``` 5. 添加请求拦截器,在请求发送前做一些处理,例如添加Token等: ```javascript instance.interceptors.request.use( config => { // 在请求发送前做一些处理 const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }, error => { // 处理请求错误 console.error(error) return Promise.reject(error) } ) ``` 6. 添加响应拦截器,对返回的数据进行处理: ```javascript instance.interceptors.response.use( response => { // 对返回的数据进行处理 return response.data }, error => { // 处理响应错误 console.error(error) return Promise.reject(error) } ) ``` 7. 将axios实例挂载到Vue原型上,这样在组件中可以通过this.$http来访问axios实例: ```javascript Vue.prototype.$http = instance ``` 8. 在组件中使用封装axios: ```javascript export default { methods: { fetchData() { this.$http.get('/api/data') .then(response => { // 处理返回的数据 }) .catch(error => { // 处理请求错误 }) } } } ``` 这样就完成了Vue2项目中对axios二次封装。你可以根据项目需求自定义一些其他的配置和处理逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值