vue前后端交互

前后端交互与Promise详解

最新推荐文章于 2024-04-07 09:24:57 发布

原创最新推荐文章于 2024-04-07 09:24:57 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #node.js

1.前后端交互模式

（1）接口调用方式

原生ajax
基于jq的ajax
fetch
axios

在vue中常用的是fetch和axios,通过url传输数据

（2）URL地址格式

Restful形式的url

http请求方式：GET（查询）、 POST（添加）、 PUT（修改）、 DELETE（删除）

2.Promise用法

为解决嵌套回调函数编码方式带来的问题，所以在es6中新增了一个API：promise(承诺的，保证)

（1）使用：

实例化promise对象，构造函数中传递函数，该函数中用于处理异步任务。
resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果。

e.g：
//promise是一个构造函数
var fs = require('fs')
// 1.创建promise容器
//promise容器一旦创建，就会执行里面的代码
var one = new Promise(function (resolve,reject) {
    fs.readFile('./data/a.txt','utf8',function (err,data) {
        if(err){
            //承诺容器中的任务失败了
            //把容器的pending状态变为rejected
            // throw err
            reject(err)
        }
        //承诺容器中的任务成功了
        //把容器pending状态变为resolved
        // console.log(data)
        resolve(data)
    })
})

var two = new Promise(function (resolve,reject) {
    fs.readFile('./data/b.txt','utf8',function (err,data) {
        if(err){
            reject(err)
        }
        resolve(data)
    })
})

var three = new Promise(function (resolve,reject) {
    fs.readFile('./data/c.txt','utf8',function (err,data) {
        if(err){
            reject(err)
        }
        resolve(data)
    })
})

one.then(function (data) {
    console.log(data)
    return two
},function (err) {
    console.log('文件读取失败！',err)
}).then(function (data) {
    console.log(data)
    return three
}).then(function (data) {
    console.log(data)
})

（2）基于ajax的promise

function get(url) {
    return new Promise(function (resolve,reject) {
        var oReq = new XMLHttpRequest()
        oReq.onload = function () {
            //异步用回调函数返回操作结果
            resolve(oReq.responseText)
        }
        oReq.onerror = function(err){
            reject(err)
        }
        oReq.open('get',url,true)
        oReq.send()
    })
}

（3）promise中常用的API

p.then() 得到异步任务的正确结果

p.catch() 获取异常信息

p.finally() 成功与否都会执行（但不是正确标准）

Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果

Promise.race() 并发处理多个异步任务，只要一个任务执行完成就能得到结果