vue中axios的同步机制Demo

Vue中axios异步请求的同步化Demo 错误写法Demo：没有将await返回的结果继续return正确写法Demo-v1：将await的结果继续return正确写法Demo-v2：try-catch处理正确写法Demo-v3：Promise风格

错误写法Demo：没有将await返回的结果继续return

//用async进行异步函数声明，在需要同步化的函数调用前添加await关键字
async fun() {
    const res = await this.req(url,params)
    console.log("请求响应结果->", res)
},

async req(url,params) {
//此处应将then或者cathc中return的结果再作为axios的结果进行返回，如果没有返回，则调用req的函数接受不到返回值，打印结果为undefinded
//正确写法对应Demo-v1或者Demo-v2
     await axios({
         method: "post",
         url: url
         params: params
     }).then(res => {
         return res.data
     }).catch(err => {
         console.log("系统出现异常信息-->", err.response)
         return err.response
     })
}

正确写法Demo-v1：将await的结果继续return

//用async进行异步函数声明，在需要同步化的函数调用前添加await关键字
async fun() {
    const res = await this.req(url,params)
    console.log("请求响应结果->", res)
},

async req(url,params) {
	//将await的结果继续return
     return await axios({
         method: "post",
         url: url
         params: params
     }).then(res => {
         return res.data
     }).catch(err => {
         console.log("系统出现异常信息-->", err.response)
         return err.response
     })
}

正确写法Demo-v2：try-catch处理

//用async进行异步函数声明，在需要同步化的函数调用前添加await关键字
async fun() {
    const res = await this.req(url,params)
    console.log("请求响应结果->", res)
},

//try-catch处理axios
async req(url,params) {
    try {//捕获请求的异常，如果请求出现异常，则将异常return
    	//用常量res接受axios的返回值
        const res = await axios({
            method: "post",
            url: url
            params: params
        })
        //将无异常情况的响应的data数据return
        return res.data
    } catch (err) {//捕获异常
        console.log("系统出现异常信息-->", err.response)
        //将异常情况的响应的response数据return
        return err.response
    }
}

正确写法Demo-v3：Promise风格

//用async进行异步函数声明，在需要同步化的函数调用前添加await关键字
async fun() {
    const res = await this.req(url,params)
    console.log("请求响应结果->", res)
},

//Promise风格封装axios异步请求，将请求同步化
req(url,params) {
    return new Promise((resolve, reject) => {
        axios({
            method: "post",
            url: url
            params: params
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            console.log("系统出现异常信息-->", err.response)
            reject(err.response)
        })
    })
}