【vue】promise+axios二次封装请求接口

最新推荐文章于 2024-03-30 14:24:37 发布

原创最新推荐文章于 2024-03-30 14:24:37 发布 · 402 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue项目中封装Axios库，实现GET和POST请求，并根据不同环境配置接口地址，同时展示了如何在组件中调用封装后的API进行登录操作。

1、ajax.js 封装axios

import axios from 'axios'
import qs from 'qs'

// 请求拦截器和响应拦截器也写在这个文件里，根据需要和项目要求写

export default function ajax(url ,data = {} ,type = 'GET'){
    return new Promise(function(resolve,reject){
        let promise
        if(type === 'GET') {
            let urlStr
            if(data != '{}') {
                urlStr = url + '?' + qs.stringify(data)
            }else {
                urlStr = url
            }
            let token = localStorage.getItem('token')
            promise = axios.get(urlStr,{
                headers:{'apiauth':token}
            })
        }else if (type === 'POST') {
            let token = localStorage.getItem('token')
            promise = axios.post(url,qs.stringify(data),{
                headers:{
                    'Content-Type':'application/x-www-form-urlencoded',
                    'apiauth':token
                }
            })
        }
        promise.then(function(response){
            resolve(response)
        }).catch(function(error){
            reject(error)
        })
    })
}

2、serviceUrl.js开发环境和生产环境的接口地址

let host = ''
if(process.env.NODE_ENV === 'development') {
    // 开发环境
    host = 'localhost:3001'
}else if(process.env.NODE_ENV === 'production') {
    host = 'http://xxxx.com'
}
export {
    host
}

3、api.js 所有的接口请求方法

import ajax from './ajax'
import {host} from './serviceUrl'
// let baseURL = 'localhost:8080'
export const login = ({name,password}) => ajax(`${host}/index/login`,{name,password},'GET')

4、 main.js 挂载在vue原型上

import Vue from 'vue'
import * as Api from './common/api' 
// 由于使用export暴露多个方法，这里要将多个方法引入，使用import * as xxx from xxx    将所有暴露出来的引入成一个对象
Vue.prototype.$api = Api

5、在组件中使用

<script>
export default {
    data () {
        return {
        }
    },
    mounted(){
        this.login()
    },
    methods:{
        async login(){
            let name = 'lisan'
            let password = '123456'
            let res = await this.$api.login({name,password})
            console.log(res)
        }
    }
}
</script>