❤React体系16-axios的封装使用（以用户请求为例）

1、认识axios

Axios 是一个基于 Promise 的 HTTP 客户端用于浏览器和 Node.js 环境中发送 HTTP 请求的第三方库，用于在客户端和服务器之间进行数据交换。

简要说一下它的优点：

1. 简单易用：简洁直观 API
2. 支持 Promise：Promise 处理异步操作，更好地处理异步逻辑。
3. 支持浏览器和 Node.js：Axios 可以同时在浏览器和 Node.js 环境中使用，
4. 功能丰富：许多扩展功能，如拦截请求和响应、自动转换 JSON 数据、取消请求、设置默认配置等，使得开发者可以轻松处理各种网络请求的需求。
5. 广泛支持：拥有广泛的社区支持和大量的文档

2、原生使用axios

大致也就是导入，然后请求和使用，以我们用户接口为例

import axios from 'axios'

// 获取用户
function getUserList() {
    // let api="http://localhost:8888/api/user/getlist";
    let api = "http://localhost:8888/api/user";
    // console.log(queryParams.value,'queryParams.value'); //查询条件
    const params = {
        name: queryParams.value.name,
        age: queryParams.value.age,
        pageNum: queryParams.value.pageNum,
        pageSize: queryParams.value.pageSize,
    };

    axios({
            method: 'get',
            url: api,
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem("login"),
                'Content-Type': 'application/json;charset=utf-8',
                'Custom-Header': 'custom-value'
            },
            params: params,
        })
        .then(res => {
            console.log(res.data);
            if (res.status == 200) {
                // console.log(res, 'res');
                tableData.value = res.data.data;
                totalvalue.value = res.data.total;
            }
        })
        .catch(error => {
            console.error(error);
        });
}

3、项目之中安装和使用axios

（1）安装axios并封装请求

yarn add axios

安装成功以后在我们的package.json文件夹下面可以看到我们的版本

（2）简单封装axios请求request.js文件

在src下的utils工具类里面新建request.js文件准备封装axios请求

我本地的后台接口地址是：'http://localhost:8888'

接下来我们简单封装一下request.js文件 // request.js

import axios from 'axios'

const service = axios.create({
  baseURL: 'http://localhost:8888', // 设置基础 URL，根据实际情况修改 '/接口前缀', //import.meta.env.VITE_BASE_URL
  headers: { 'Content-Type': 'application/json;charset=utf-8', },
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理，例如添加 token 等
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 在响应数据返回之前做一些处理
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);
export default service;

（3）完善请求接口路径文件

在src下的api接口类里面新建common问价夹下common.js文件放接口请求 common.js 里面

import request from '@/utils/request.js'

// 获取网站信息
export function getqueryWebInfo(params) {
    return request({
        url: '/你的接口地址',
        method: 'get',
        params
    })
}

以用户请求列表接口为例子

import request from '@/utils/request.js'
// 用户列表
export function getUser (n) {
    return request({
      url: '/api/user',
      method: 'get',
      data:n
    })
 }

（4）用户之中使用

接下来我们简单搭建一下我们的用户列表,最终我们搭建的效果图如下：

<div className="pageuser">
      <div className="compage userpage">
        <div className="comback">
          <button onClick={() => {
            console.log('click');
          }} id="searchButton" className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
            搜索
          </button>
          </div>
        </div>
        <div className="comback">
          <div className="comback"> </div>
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年龄</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">手机号</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
                <th scope="col" className="relative px-6 py-3"><span className="sr-only">操作</span></th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">name</td>
                <td className="px-6 py-4 whitespace-nowrap">age</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">state</span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">phone</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">角色</td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <a href="#" className="text-indigo-600 hover:text-indigo-900">Edit</a>
                </td>
              </tr>
              {/* <!-- More rows... --> */}
            </tbody>
          </table>
          </div>
        </div>
      </div>

尝试一下按钮的点击，没有问题，接下来我们就开始搞我们的请求部分。

引入接口 定义请求方法

import { getUser } from '@/api/common/comon';
// 获取用户
const  getUserList = () =>{
  let api = "http://localhost:8888/api/user";
  getUser().then(res => {
    console.log(res, 'getUser');
  })
}

这里我们暂时未对接口做任何的校验，所以我们直接就可以进行调用查询；

添加鼠标点击

onClick={() => {
   console.log('click');
   getUserList();
 }} 

可以看到我们已经成功添加并且对于接口进行了请求并正确返回结果！