Vue2封装Axios - 技术栈

一、介绍

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求。

二、安装

复制代码

npm install axios --save

二、axios不同请求方式

axios(config)

这是 Axios 的核心方法，用于发送自定义配置的 HTTP 请求。通过传入一个包含请求配置的对象，可以灵活设置请求的各种参数。

复制代码

axios({
  method: 'get',
  url: 'http://api.example.com/data',
  params: { id: 123 }
}).then(response => {
  console.log(response.data);
});

axios.request(config)

与 axios(config) 功能完全相同，是发送请求的通用方法。可以理解为 axios(config) 的别名。

复制代码

axios.request({
  method: 'post',
  url: 'http://api.example.com/submit',
  data: { name: 'John' }
});

axios.get(url[, config])

发送 GET 请求的便捷方法。用于从服务器获取数据。

====》url : 请求的 URL 地址

====》config : 可选的配置对象

复制代码

axios.get('http://api.example.com/users', {
  params: { page: 1, limit: 10 }
});

axios.delete(url[, config])

发送 DELETE 请求的便捷方法。通常用于删除服务器上的资源。

复制代码

axios.delete('http://api.example.com/users/123');

axios.head(url[, config])

发送 HEAD 请求的便捷方法。只请求资源的头部信息，不返回主体内容。

复制代码

axios.head('http://api.example.com/document');

axios.post(url[, data[, config]])

发送 POST 请求的便捷方法。用于向服务器提交数据。

====》url : 请求的 URL 地址

====》data : 要发送的数据

====》config : 可选的配置对象

java 复制代码

axios.post('http://api.example.com/users', {
  name: 'Alice',
  email: 'alice@example.com'
});

axios.put(url[, data[, config]])

发送 PUT 请求的便捷方法。通常用于更新服务器上的资源（替换整个资源）。

java 复制代码

axios.put('http://api.example.com/users/123', {
  name: 'Updated Name'
});

总结

所有这些方法都返回一个 Promise 对象，可以使用 .then() 和 .catch() 处理响应和错误。
axios(config) 和 axios.request(config) 是通用方法，可以通过配置 method 属性支持各种 HTTP 请求类型。
其他方法（如 get 、 post 等）是特定 HTTP 方法的便捷封装，使代码更简洁易读。
在实际开发中，通常会根据具体的请求类型选择对应的便捷方法，而不是总是使用通用方法。

三、简单使用

在页面中，先导入axios

在created中

测试：页面启动查看控制台是否有返回值

Bug：

这个是因为跨域问题导致，在后端controller加上@CrossOrigin

复制代码

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {...}, request: XMLHttpRequest, ...}
code: "ERR_NETWORK"
config: {transitional: {...}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, ...}
message: "Network Error"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, ...}
stack: "AxiosError: Network Error\n    at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14)\n    at Axios.request (webpack-internal:///./node_modules/axios/lib/core/Axios.js:58:41)"
[[Prototype]]

四、二次封装

1、为什么需要封装？？

方便管理和操作和维护

（1）请求的url地址的统一管理

（2）某些接口需要传递headers请求头，可以进行统一管理

2、封装步骤

2.1 在src中创建utils文件夹，在utils中新建request.js文件

2.2 在request.js中配置以下内容

步骤：引入axios -> 创建axios对象 -> 请求拦截器 -> 响应拦截器 -> 导出

java 复制代码

//1、引入axios
import axios from "axios";

//2、创建axios对象
const service = axios.create({
    baseURL:"http://localhost:8080"
});

//3、请求拦截器  前端给后端发送数据
service.interceptors.request.use(
    // 响应成功拦截
    config => {
        // 对响应数据做点什么
        return config;
    },
    // 响应错误拦截
    error => {
        // 对响应错误做点什么
        Promise.reject(error)
    });

//4、响应拦截器 后端给前端返回数据
service.interceptors.response.use(
    // 响应成功拦截
    response => {
        // 这个响应数据会返回给页面进行打印和使用
        return response.data;
    },
    // 响应错误拦截
    error => {
        // 对响应错误做点什么
        Promise.reject(error)
    });


export default service;

【小tips】

在响应拦截器中为什么return response.data？？？

因为后端返回数据可能是

{

data:[ xxxx,xxxxx]

}

所以我们后续在vue文件中想获取data内容

res 就是 response.data，如下打印结果

2.3 使用

五、API解耦

1、创建文件
新建src/apis/接口js文件（以yq.js文件为例）
2、封装api

3、api使用

在需要使用的vue文件中先导入需要的api方法

4、调用接口