vue 中请求数据 函数 搭配 async 和 await使用

虽然 await 后面不一定非得跟 一个 返回promise对象得函数 但是如果你在工作中用的话 那就是必须后面跟一个 Promise函数

在没搞懂 async await promise三者之间的关系前 不要去使用 async 在你得vue项目中 这个东西 用的好 事半功倍 用的不好 掉进深坑
之前博主有专门讲解过三者之间的关系 可以去看之前的博客
飞机票

1. 在vue中请求数据用的是axios 而且axios 请求数据都是返回一个 promise对象
   所以在 axios 请求 前面使用await 是合理得

// 下面 request 是一个封装好的 axios 请求 文件

import service from '@/request';export default {//  param 是可选  请求参数getData: function(param) {return service.get('users/', {param});}
}

然后就是在组件中使用

data:function() {return {list: []}},
methods: {///  async 写在函数前面requestData : async function() {var param = { num: 123 }//  api.getData()  执行完就是返回了一个 Promise 对象var res = await api.getData(param);this.list = res.data.data;console.log(this.list)}},created() {this.requestData(); // 调用请求数据},

这里也附上 request 中得请求文件 稍微 写了点代码

import axios from "axios";// 创建一个 axios 实例
const service = axios.create({baseURL: "http://localhost:3000/",withCredentials: true,timeout: 5000 // 请求超时时间
});// 请求拦截器
service.interceptors.request.use(config => {// 在请求发送之前做一些处理// const token = util.cookies.get("token");// // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改// config.headers["X-Token"] = token;return config;},error => {// 发送失败Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use(response => {// *** 这里做些什么 我就不写了return response;}
);export default service;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！