美文网首页
Vue 使用axios进行Ajax请求封装

Vue 使用axios进行Ajax请求封装

作者: 码农界四爷__King | 来源:发表于2020-04-12 10:56 被阅读0次

    第一步 使用 脚手架安装vue/axios 具体相关百度文档

    第二步 在src文件里面新建文件夹api,在api文件里面新建两个js(ajax.js和index.js)

    ajax.js里面对axios进行封装
    import axios from 'axios'  //引用安装好的axios
    
    const baseURL = 'http://admin.baidu.com/'
    const service = axios.create({
        baseURL: baseURL, // url = base url + request url
        withCredentials: true, // send cookies when cross-domain requests
        // timeout: 5000, // request timeout
        crossDomain: true
    })
    //params 用于get请求 拼接在url后面
    //data 用于post请求放在请求体里面
    export default function ajax(url = '', params = {}, data = {}) {
        // 1. 定义promise对象
        let promise;
        return new Promise((resolve, reject) => {
            /* 拼在URL后面的参数 */
            let paramsStr = '';
                  //如果所有接口有一个统一的必传的值可在这设置
            /*  paramsStr += 'version' + '=' + "1.4" + '&'; //版本
                paramsStr += 'app' + '=' + "1" + '&'; //app */
            Object.keys(params).forEach(key => {
                paramsStr += key + '=' + params[key] + '&'
            });
            if (paramsStr !== '') {
                paramsStr = paramsStr.substr(0, paramsStr.lastIndexOf('&'))
            }
    
            url += '?' + paramsStr;
            promise = service.post(url, data)
            // 3. 返回请求的结果
            promise.then((response) => {
                resolve(response.data)
            }).catch(error => {
                reject(error)
            })
        })
    }
    
    index.js
    import ajax from './ajax'  //引用封装好的axios
    const api = {} //新建一个api对象 里面放开发时使用的一系列接口
    api.homePage = (params, data) => ajax(`api/home/homePage`, params, data)
    export default api //将新建好的api对象模块指定默认输出 
    
    在main.js里面进行引用
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import index from "./api/index.js" //引用 存放一系列接口的api对象
    
    Vue.prototype.$api = index;  //设置全局变量  可以在各个页面中使用调用接口  不用在每个页面中单独导入使用
    Vue.config.productionTip = false
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
    
    在某个页面中进行使用 比如在home.vue中使用
    <template>
        <div>
            <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" />
            <van-swipe class="my-swipe" indicator-color="#3499fc" :autoplay="3000">
                <van-swipe-item v-for="(item,index) in banner" :key='index'>
                    <van-image :src="item.img" fit="cover" width="100%" height="140px" />
                </van-swipe-item>
            </van-swipe>
            <van-grid>
                <van-grid-item icon="photo-o" text="文字" />
                <van-grid-item icon="photo-o" text="文字" />
                <van-grid-item icon="photo-o" text="文字" />
                <van-grid-item icon="photo-o" text="文字" />
            </van-grid>
        </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    value: "sa",
                    banner: ''
                }
            },
            methods: {
                uindex() {
               //直接调用全局方法 homePage 为你在index.js里面 设置的api.xxx方法  直接调用使用即可
                    this.$api.homePage({
                        screen_type: "",
                        screen_id: "",
                        screen_name: ""
                    }, {
                        token: ''
                    }).then(res => {
                        // console.log(res)
                        this.banner = res.data.list.banner
                    }).catch(function(error) {
                        console.log(error);
                    });
                }
            },
            mounted() {
                //对调用接口方法进行加载
                this.uindex()
            },
            onLoad() {
    
            }  
        }
    </script>
    
    <style scoped>
        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;
        }
    
        .van-image {
            display: block;
        }
    </style>
    

    相关文章

      网友评论

          本文标题:Vue 使用axios进行Ajax请求封装

          本文链接:https://www.haomeiwen.com/subject/rhlvmhtx.html