vue 同步请求 async/await

一、概述
在前端开发中,多多少少会碰到一些异步获取数据的问题,这里我们使用 async/await 实现promise同步调用。
二、代码块
1、配置axios的index.js

/* eslint-disable */
import axios from 'axios';

const Config = {
    baseURL: './api',
    timeout: 100000
};
axios.defaults.baseURL = Config.baseURL;
axios.defaults.timeout = Config.timeout;

axios.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem('rest-x-auth-token');
        if (token) {
            config.headers['x-auth-token'] = token;
        }
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

axios.interceptors.response.use(
    (response) => {
        return Promise.resolve(response.data);
    },
    (error) => {
        if (error.response) {
            let rsp = error.response;
            if (rsp.status === 401) {
                localStorage.removeItem('rest-x-auth-token');
                localStorage.removeItem('rest-x-auth-user');
                // if (rsp.data && rsp.data.content) {
                //     window.top.location.href = rsp.data.content;
                // }
                return Promise.reject({ status: -100, message: '未授权' });
            } else {
                if (typeof rsp.data === 'object') {
                    return Promise.reject(rsp.data);
                } else {
                    return Promise.reject({
                        status: rsp.status,
                        message: rsp.statusText
                    });
                }
            }
        } else {
            return Promise.reject({ status: -1, message: error.message });
        }
    }
);

export default axios;

2、引用axios的配置文件index.js

import api from '@/api/index.js';
Vue.prototype.$api = api;

3、同步获取数据

async getData(param1,param2,param3) { //数据详情
   let obj;
   await this.$api.get('/v1/hot-article/7day-detail', {
       params: {
           param1: param1,
           param2: param2,
           param3: param3
       }
   }).then((res) => {
       obj = res;
   });
   return obj;
}

4、同步调用


    this.getDateStr(this.sevenDates[1])).then((obj) => {
    	consoel.log(obj);
    );

你可能感兴趣的:(vue 同步请求 async/await)