Axios的二次封装

直接使用Axios存在的问题：有这么一个需求，用户创建账户之后，给用户发送一个短信提示创建用户成功，然后再发送一个邮件给用户，也提示用户创建成功……这时候如果还这么写axios请求，就会导致请求嵌套严重，可读性低，也就是所谓“嵌套地狱”。

解决办法：使用promise将异步操作队列化，进行二次封装

promise

1、定义一个utils文件夹，定义一个js文件，我们这就叫index.js

//1.引入axios
import axios from 'axios'
//2.定义一个统一的跟路径
const baseURL = "https://autumnfish.cn";
//3.封装一个request对象
export const request = (params) => {
    //4.在方法里面创建一个异步的对象
    return new Promise((resolve, reject) => {
        // 发送 POST 请求
        axios({
            //先对传递过来的参数进行解构
            ...params,
            url: baseURL + params.url
        }).then(function (response) {
            resolve(response.data);
        }).catch(function (error) {
            reject(error);
        });
    })
}

2、使用

<script>
import { request } from "../utils/index";//导入请求的js
export default {
  name: "discovery",
  methods: {
    async getBannerList() {
      let result = await request({//接收
        url: "/banner",
        method: "GET",
        // 如果有参数，如果使用的是post请求，用data代替params
        params:{
            limit:10,
        },
      });
      console.log(result);//打印
    },
  },
  created() {
    this.getBannerList();
  },
};
</script>