vue中封装axios 以及api 统一管理

一、安装axios

npm install axios --save-dev

二、创建文件夹

在根目录的src中创建一个http文件夹，用来存放我们封装的接口。
在http文件夹中创建request.js专门用来封装，api.js专门用来放置我们的接口请求。

三、封装axios

1. 引入axios

      import axios from “axios”;

2. 引入vuex

      import store from “@/store/index”;

3. 引入vant

      import { Toast } from “vant”;

4. 引入我们的环境变量

      import baseUrl from “@/config/index”;

5.创建axios实例

      const instance = axios.create({
	      // axios.create 创建axios实例
          timeout: 5000,
          // 如果请求超过事件，就放弃这个请求
          baseUrl
          // 域名
       })

6. 添加请求拦截

使用 axios实例.interceptors.request.use(成功回调,失败回调);
我们可以在请求拦截中开启loading动画，判断用户是否登录，以及携带token

    instance.interceptors.request.use(config => { // config 就是我们一些请求的配置
    // 成功回调
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
    });
    // vant loading 动画
    if (store.state.token) {
    // vuex中的token是否是空，如果不为空就设置请求头，携带token
        config.headers.Authorization = store.state.token;
    }
    return config;
    // 一定要返回config，否则报错
}, error => {
    // 失败回调
    return Promise.reject(error);
    // 失败返回一个 Promise对象
})

7. 响应拦截

使用 axios实例.interceptors.response.use(成功回调,失败回调);
我们在响应拦截中，可以关闭loading动画，判断返回的状态码来做响应的操作

instance.interceptors.response.use(response => { // response 服务器返回的数据
    // 成功回调
    Toast.clear();
    return response;
    // 必须返回有返回值
}, error => {
    // 失败回调
    return Promise.reject(error);
    // 必须有返回值
})
// 响应拦截

8. 导出封装的axios函数

export default (url, method, params) => {
// url请求地址
// method 请求方式
// params 参数
    return instance({
    // 返回我们的axios实例
        url:url,
        method:method,
        params:params,
    }).then(res => {
    // res 我们后端返回的数据
        if (res.status >= 200 && res.status < 300) {
        // 如果我们返回的数据状态码为200-300之间就是成功
            return res;
        } else {
            return Promise.reject(res.data);
            // 失败返回一个Promise对象
        }
    }).catch(err => {
        return Promise.reject(err);
        // 请求失败返回一个Promise对象
    })
}

四、api统一管理

1.引入我们封装的axios

import http from “./request”

2.使用async/await进行请求优化

async function getIndex(obj) {
    let res = await http('url',"get",{id:1});
    // 我们使用await等待请求结果出来
    return res;
    // 返回这个结果
}
// 比如这是我们主页的数据
// 可以写多个

3.导出

export {
    getIndex,
}

注意：导出多个的时候只能使用export，导出的时候函数中间使用逗号隔开

五、使用

比如我们在主页要使用这个接口

<template>
  <div class="home">
  </div>
</template>

<script>
import { getIndex } from "@/http/api";
// @表示我们的 src文件夹
// 首先我们需要引入响应的接口函数，使用解构赋值的方式
// 当导入多个的时候，函数名之间使用逗号隔开
export default {
  data() {
    return {};
  },
  mounted() {
    getIndex().then((res) => {
    // 调用函数即可
    // res就是我们的数据
      console.log(res);
    }).catch(err=>{
		console.log(err)
		// err是我们的报错
	});
  },
};
</script>