Vue的请求封装

这篇文章是针对vue3的请求进行封装,request请求封装可以封装成很多形式,我封装的大家可以参考一下

安装axios

npm install axios

在utils文件夹下  新建一个文件server.js文件 和 一个http.js

server.js作为我们封装axios的js文件  http.js作为导出定义接口的文件

首先封装axios 

//引入axios实例
import axios from "axios";
//引入一个loading组件
import { ElLoading  } from "element-plus";
// loading初始值为0
let index = 0;
//配置基地址
let baseURL = "https://*************.com"
//请求拦截器  我们在发起请求之前可以在这个实例里面做操作
axios.interceptors.request.use(
    function (config) {
      // 在发送请求之前做些什么
      index = ElLoading.service({
        background: "rgba(255,255,255,.8)",
        text: "努力加载中...",
      });
      
      // 从locastorage中获取token
      const token = localStorage.getItem("token");
      // 如果token存在 将token放在请求头中
      if (token) {
        //在请求头中携带Token
        config.headers.Authorization = `Bearer ${token}`
      }
      return config;
    },
  
    function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    }
  );
  
  // 添加响应拦截器
  axios.interceptors.response.use(
    function (response) {
        
      // 对响应数据做点什么
      index.close(); //关闭加载框
      console.log(response,'返回的数据');
      return response;
      
    },
    function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    }
  );
  

  export default {
    http(methods, url, data) {
        console.log(data,'--data--');
      console.log(methods, "methods");
      return new Promise((resolve, reject) => {
        return axios({
          method: methods,//请求类型
          baseURL: baseURL,//接口基础地址
          timeout: 3000,//超时时间
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            'source-client': 'miniapp',
          },//请求头类型
          url,//接口地址
          data,//请求参数
        }).then((res) => {
          if (res.status == 200) {
           
            console.log("成功");
            resolve(res);
          } else {
            console.log("失败");
            reject(res);
          }
        });
      });
    },
  };
  

按照上述代码 一个基础的request请求封装已经好了,此时我们根据接口文档的内容定义接口就行

在http.js中,将server.js的http函数导入

import server from "@/utils/server";

接着定义接口,拿登录接口为例

export default {
  //定义登录接口  
  login(data) {
    return server.http("get", "/login", data);
  },
};

以为最终接口需要再vue的页面中引入使用  我们需要将其导出

我们可以使用async  await 关键字进行调用

import http from '@/utils/http.js'
const onLogin = async()=>{
    const res = await http.login({
        id:123
    })
    console.log(res);
}

或者使用promise调用 二者都可以  但是使用async一定要和await成对出现!!!

const onLogin = ()=>{
   http.login({id:123}).then(res=>{
    console.log(res)
})
}