vue中使用自己封装的ajax

最新推荐文章于 2023-09-11 15:23:51 发布

Run4Freedom

最新推荐文章于 2023-09-11 15:23:51 发布

阅读量346

点赞数

分类专栏： es6 VueJs 文章标签： Lenhart的成长之路----vue-ajax promise

本文链接：https://blog.csdn.net/github_38851471/article/details/79270552

版权

es6 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

VueJs

6 篇文章 0 订阅

订阅专栏

vue中使用自己封装的ajax

1.回调函数的解决方法promise类

在讲ajax之前，今天我先讲讲回调函数，所谓回调函数，就是将后续的处理逻辑传入到当前要做的事情，事情做好之后调用此函数，下面实现一个买菜的例子。

let a = '';
function buy(callback) {
    setTimeout(()=>{
        a = '蘑菇';
        callback(a);
    }, 2000);
}
buy(function cookie(val) {
    console.log(val);
});

promise 是用来解决回调问题， promise 的实例就是一个 then 方法，then 方法中有两个参数，resolve和reject，
下面是promise的三个状态（不传参数的时候会直接执行）

fulfill 成功态会调用resolve函数
reject 失败态会调用reject函数
wait 等待态

然后再用promise解决上面的买菜方法：

let promise = new Promise((resolve, reject)=>{
    setTimeout(() => {
        let a = '蘑菇';
        // resolve(a);
        reject();
    }, 2000);
});
promise.then((data)=>{console.log(data)}, (err)=>{console.log('err')})

下面再使用promise写一个投掷硬币给女朋友买包的功能：

function buyPack() {
	return new Promise((resolve, reject)=>{
		setTimeout(()=>{
			if (Math.random()>0.5){
				resolve('买包');
			} else {
				reject('不买');
			}
		}, Math.random()*3000); // 3秒之内要做出决定，你懂得
	
	})
}
buyPack().then((data)=>{
	console.log(data);
}, ()=>{
	console.log(data);
});

2.使用promise封装异步ajax promise-ajax

首先我先创建一个 cart.json 文件，用来保存json数据。

[
  {
    "isSelected": true,
    "productCover": "123",
    "productName": "深入浅出Node.js学习",
    "productInfo": "深入浅出Node.js学习,深入浅出Node.js学习",
    "productPrice": 45.5,
    "productCount": 1
  },
  {
    "isSelected": true,
    "productCover": "345",
    "productName": "javascript数据结构与算法",
    "productInfo": "javascript数据结构与算法,javascript数据结构与算法",
    "productPrice": 49.5,
    "productCount": 1
  }
]

然后创建了一个 promise-ajax.js 的文件，然后把ajax用promise的方法封装了一下，然后就可以使用了

/**
 * promise-ajax
 * @param url
 * @param type
 * @param dataType
 * @returns {Promise<any>}
 */
function ajax({url='', type='get', dataType='json'}) {
    return new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(type, url, true);
        xhr.responseType = dataType;
        xhr.onload = function () {  // xhr.onReadyState === 4 && xhr.status === 200
            resolve(xhr.response);  //成功调用成功的方法
        };
        xhr.onerror = function (err) {
            reject(err);            //失败调用失败的方法
        }
        xhr.send();
    });
}

3.实现vue中使用封装的ajax方法 vue-ajax

我是用的webstorm 的服务器，接下来使用vue的方法来请求cart.json文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-ajax</title>
</head>
<body>
<div id="app">
    {{arr}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./4.promise-ajax.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        //专门用来发送ajax的方法
        created(){
            ajax({url:'./cart.json'}).then((res)=>{
                console.log(res);
            }, (err)=>{
                //...
            })
        },
        method:{
            a:''
        },
        data: {
            arr:[],
            products:[]
        }
    });
</script>
</body>
</html>

然后在chrome的开发者工具中就可以看到数据请求回来了。
这里写图片描述

Run4Freedom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中使用自己封装的ajax

Lenhart的成长之路—-vue-ajax1.回调函数的解决方法promise类在讲ajax之前，今天我先讲讲回调函数，所谓回调函数，就是将后续的处理逻辑传入到当前要做的事情，事情做好之后调用此函数，下面实现一个买菜的例子。let a = '';function buy(callback) { setTimeout(()=>{ a = '蘑菇';
复制链接

扫一扫