Vue3 编写HTTP 请求工具并使用

编写Http请求

首先在vue项目中创建一个api工具包并新建http.js

导入axios

import axios from 'axios';

如果没有axios，那么要先下载一个

下载axios

配置axios默认设置

• 设置了 Axios 的默认超时时间为 5 秒。
• 允许跨域请求，通过设置 withCredentials 为 true。
• 设置了 POST 请求的默认 Content-Type 响应头为 'application/x-www-form-urlencoded;charset=UTF-8'。
• 设置了基础 URL 为 "http://localhost:8080"，这意味着所有请求都会以这个 URL 作为前缀。

axios.defaults.timeout=5000; //超时时间5s
axios.defaults.withCredentials=true;//允许跨域
//Content-type响应头
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';
// 基础url
axios.defaults.baseURL="http://localhost:8080"

响应拦截器：

• 定义了一个响应拦截器，它会在每个请求结束后执行。
• 如果响应状态码为 200，拦截器会解析响应并返回给调用者。
• 如果响应状态码不是 200，拦截器会拒绝响应并返回错误。
• 对于错误响应，拦截器会根据状态码进行不同的处理：
  • 如果状态码为 401（未授权），它会重定向到登录页面，并带上当前页面的路径作为查询参数。
  • 如果状态码为 404（未找到），目前没有做任何处理，但你可以根据需要添加逻辑。

// 响应拦截器
axios.interceptors.response.use(
       response=>{
        //如果reponse里面的status是200，说明访问到接口了，否则错误
        if(response.status==200){
            return Promise.resolve(response);
        }else{
            return Promise.reject(response)
        }
       },
       error=>{
        if(error.response.status){
           switch(error.response.status){
            case 401:  //没有登录，返回登录页面
                router.replace({
                    path:'/',
                    query:{
                        redirect:router.currentRout.fullPath
                    }
                });
                break;
            case 404:  //没有找到
                  break;
           }
           return Promise.reject(error.response);
        }
       }
       
);

封装get和post方法：

1. 封装 GET 方法：

   • 定义了一个 get 函数，它接受 url 和 params 作为参数。
   • 使用 Axios 发送 GET 请求，并将查询参数附加到 URL 上。
   • 如果请求成功，它将解析响应数据并返回给调用者。
   • 如果请求失败，它将拒绝错误。

2. 封装 POST 方法：

   • 定义了一个 post 函数，它接受 url 和 data 作为参数。
   • 使用 Axios 发送 POST 请求，并将请求体数据发送到服务器。
   • 如果请求成功，它将解析响应数据并返回给调用者。
   • 如果请求失败，它将拒绝错误。

// 封装get方法

// Promise是 JavaScript 中用于处理异步操作的一种对象。它代表了一个异步操作的最终完成（或失败）及其结果值。
//执行器函数有两个参数，分别是用于表示异步操作成功的resolve函数和表示异步操作失败的reject函数。
//异步操作成功则执行resolve函数，失败则执行reject函数
export function get(url,params={}){
    return new Promise((resolve,reject)=> {

        axios.get(url,{params:params})
        .then(response=>{
            //成功的回调
            //response是一个名字，随便起，它代表了服务器响应的所有数据，包含响应头，响应体.response.data代表的是接口响应的核心数据
            resolve(response.data);
        })
        .catch(err=>{
            //失败的回调
            reject(err);
        })

    });
}


//封装post方法

export function post(url,data={}){
    return new Promise((resolve,reject)=> {

        axios.post(url,data)
        .then(response=>{
            //成功的回调
            //response是一个名字，随便起，它代表了服务器响应的所有数据，包含响应头，响应体.response.data代表的是接口响应的核心数据
            resolve(response.data);
        })
        .catch(err=>{
            //失败的回调
            reject(err);
        })

    });
}

将以上代码全部拼接放到http.js中即可

使用方法：

 以post方法为例

新建index.js文件作为服务接口

从http.js中导入get，post方法，并编方法体

import {get,post} from "./http"

//服务接口

//判断管理员是否登录成功
export const getLoginStatus=(params)=>post('自己后台定义的url：admin/login/status',params);

提交表单：

function submitForm(){
   //URLSearchParams是 JavaScript 中的一个内置构造函数，用于处理 URL 的查询字符串参数
  //比如说url = 'https://example.com?param1=value1&param2=value2';
  //param1=name=ruleForm.username
  let params=new URLSearchParams();
  params.append("name",ruleForm.username);
  params.append("password",ruleForm.password);
  getLoginStatus(params)
  .then((res)=>{
    if(res.code==1){
      notify("登录成功","success");
      router.push("/Info")
    }else{
      notify("登录失败","error");
    }
  })
}