关于前端请求接口封装（未完

src/utils/request.js

1. 引入axios

2. 创建axios对象，

   URl就是个对象，统一管理，通过设置一个baseURL，便于为axios实例的方法传递相对URL

   baseURL//url = baseurl + requesturl

3. 添加请求拦截器

   前端给后端的

   在发送请求之前做些什么，判断用户是否是登录状态

4. 添加响应拦截器

   后端给前端的，先前给后，再后给前

5. 导出实例

 

axios的二次封装

1. URL统一管理方便日后更换，

2. post请求，需要判断用户是否是登录状态，每次要传递参数都要需要写一次，封装无需重复写。

//request.js
import axios from "axios";
import router from "@/router";
// import { Message } from 'element-ui';
// import { MessageBox, Message } from 'element-ui'
​
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 60000, // request timeout
});
​
// request interceptor
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("Authorization");
    // console.log('request',token)
    // 判断token存在再做配置
    // 注意：token前边有 'Bearer ' 的信息前缀,API接口需求，Bearer后边有空格
    config.headers.Authenticator = token;
    return config;
  },
  (error) => {
    // console.log(error); // for debug
    router.replace({
      path: "/login",
    });
    return Promise.reject(error);
  }
);
​
// response interceptor /后端给前端
service.interceptors.response.use(
  //response里有状态值/文本/heads/config/resqest里的一些方法/data
  (response) => {
    const res = response.data ?? response;
    
    if (response.status !== 200) {
      return Promise.reject(new Error("Error"));
    } else {
      localStorage.setItem("Authorization", response.headers.authenticator);
      return res;
    }
  },
  (error) => {
    //超出2xx范围的状态码都会触发该函数
    if (error.response.status === 401) {
      router.replace({
        path: "/login",
      });
    } else {
      console.log("err" + error); // for debug
      //对响应错误做些什么
      return Promise.reject(error);
    }
  }
);
​
export default service;
​

 

 

API解耦

为什么要封装：/api

1. 单独维护api的1请求会让项目中所有的请求方便管理

2. 很多页面共用一个请求，无需重复写，直接调用封装的函数。

//api/login.js
import request from '@/utils/request'
​
/**
 * @returns {统一登录}
 */
//get
export function autoLogin(code) {
  return request({
    url: `/api-usersystem/sso/login?code=${code}`,
    //url: `/api-usersystem/login/autoLogin?code=${code}`,
    method: 'get'
  })
}
​
/**
 * @return {填报任务添加}
 */
//post
export function taskInsert(params) {
  return request({
    url: `/api-task/taskIndexWritePlan/insert`,
    method: "post",
    data: params,
  });
}
/*
eg：
taskInsert({
  a:100,
  b:'abc'
})
将{}内直径赋给params，而在es6写法中，可以直接
export function taskInsert(params) {
  return request({
    url: `/api-task/taskIndexWritePlan/insert`,
    method: "post",
    params,
  });
}
 */
​

在index.vue中需要引入import { autoLogin } from "@/api/login";

 

 

拓展：

API 解耦

在软件开发中将 API（应用程序接口）与其他组件或模块解耦，使其相互独立、可替换和可重用。这种解耦的设计有助于提高系统的灵活性、可维护性和可扩展性。

下面是一些常见的方法来实现 API 解耦：

1. 使用接口或抽象类：定义一个接口或抽象类作为 API 的抽象层，其他组件或模块通过依赖注入或继承实现该接口或抽象类，实现与具体 API 的解耦。这样，当需要替换底层 API 时，只需修改实现接口或抽象类的部分，而不需要修改其他组件或模块的代码。

2. 适配器模式：通过使用适配器模式，将底层 API 的接口转换为统一的接口，使其他组件或模块与适配器进行交互，而不直接与底层 API 进行交互。这样，在需要更换底层 API 时，只需要更改适配器的实现，而不需要修改其他组件或模块的代码。

3. 依赖注入：将 API 的实例注入到需要使用它的组件或模块中。通过依赖注入容器或框架来管理依赖关系，可以方便地替换或配置不同的 API 实现。这样，可以在不修改组件或模块代码的情况下，轻松切换不同的 API 实现。

4. 使用配置文件：将 API 的配置信息放在配置文件中，通过读取配置文件来获取 API 的相关信息。这样，在更换 API 或调整 API 配置时，只需修改配置文件而不需要修改代码。

5. 使用中间层或代理：在系统中引入一个中间层或代理来处理与 API 的交互。中间层可以封装底层 API 的细节，并提供统一的接口给其他组件或模块使用。这样，当需要更换底层 API 时，只需要调整中间层或代理的实现，而不需要修改其他组件或模块的代码。

这些方法可以根据具体的需求和系统设计进行选择和组合使用，以实现对 API 的解耦。通过解耦，可以提高系统的灵活性、可维护性和可扩展性，降低对具体实现的依赖性。

 

GET 和 POST

两种常用的 HTTP 请求方法，它们在以下几个方面有区别：

1. 数据传输位置：

   • GET 方法：GET 请求将数据附加在 URL 的查询参数中，即数据在请求的 URL 中可见。例如：/api/users?id=1。

   • POST 方法：POST 请求将数据包含在请求的消息体（Request Body）中，即数据不会在 URL 中可见。

2. 数据传输大小限制：

   • GET 方法：由于数据附加在 URL 上，URL 的长度有限制，不同的浏览器和服务器对 URL 长度的限制可能不同，通常限制在几千个字符。

   • POST 方法：由于数据包含在消息体中，没有明确的长度限制，但服务器和网络设备可能会有自己的限制。

3. 数据安全性：

   • GET 方法：由于数据附加在 URL 上，数据会被包含在浏览器的历史记录、服务器日志等中，存在一定的安全风险。不适合传输敏感信息，如密码等。

   • POST 方法：由于数据在消息体中，不会被直接暴露在 URL 中，相对来说更安全。适合传输敏感信息。

4. 数据语义：

   • GET 方法：GET 请求应该是幂等的，即多次请求同一个 URL 应该返回相同的结果，不应该对服务器产生副作用。一般用于获取数据。

   • POST 方法：POST 请求通常用于提交数据到服务器进行处理，可能对服务器产生修改的副作用。

5. 缓存处理：

   • GET 方法：GET 请求可以被浏览器缓存，可以使用缓存来提高性能。但缓存可能导致在某些情况下获取到过期的数据。

   • POST 方法：POST 请求默认不会被缓存，每次都会向服务器发送请求。

根据以上区别，通常推荐以下使用场景：

• GET 方法：用于获取数据，不涉及对服务器的修改操作，适用于幂等的请求。

• POST 方法：用于向服务器提交数据，进行修改操作或发送较大量的数据。

在实际应用中，选择使用 GET 还是 POST 取决于具体的需求、安全性要求和接口设计的合理性。

 

axios/fetch

axios 和 fetch 都是用于在浏览器中进行网络请求的工具，但它们在使用方式和功能上有一些区别。

下面是一些关于 axios 和 fetch 的比较：

1. API 设计和使用方式：

   • axios：axios 是一个基于 Promise 的 HTTP 客户端库，提供了简洁的 API，并且具有广泛的功能和选项。它可以通过配置全局默认值、拦截器、取消请求等来进行请求的定制。

   • fetch：fetch 是现代浏览器原生提供的 API，它使用简洁的方法和选项来发送请求。fetch 返回的是一个 Promise 对象，并且在基本使用上比 axios 更简单。

2. 兼容性：

   • axios：axios 是一个独立的第三方库，它在主流浏览器中有良好的兼容性，并且可以在 Node.js 环境中使用。

   • fetch：fetch 是现代浏览器原生提供的 API，不支持较旧版本的浏览器。但是，您可以使用 fetch 的 polyfill 或使用第三方库来提供更好的兼容性。

3. 功能和扩展性：

   • axios：axios 提供了许多功能，例如请求拦截器、响应拦截器、并发请求、取消请求等。它还支持全局默认配置和自定义实例，使得请求的定制更加灵活。

   • fetch：fetch 是一个简洁的 API，不具备像 axios 那样丰富的功能和扩展性。一些高级功能，如请求和响应拦截器、取消请求等需要额外的代码来实现。

4. 错误处理：

   • axios：axios 在错误处理方面提供了一些方便的功能，例如通过 catch 方法捕获请求错误、处理 HTTP 错误状态码等。

   • fetch：fetch 仅在网络错误时会抛出异常，而对于 HTTP 错误状态码（如 404、500 等），它不会被认为是网络错误，因此不会被 catch 捕获，需要手动处理。

根据具体需求和项目情况，您可以选择适合的工具。如果需要更多的功能和兼容性，可以考虑使用 axios。如果希望使用原生的浏览器 API，并且只需进行简单的请求，可以考虑使用 fetch。

无论选择 axios 还是 fetch，都可以用于发送 GET、POST 和其他类型的请求，并根据需要进行数据处理和错误处理。