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

❤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)用户之中使用

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

{ 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"> 搜索
          {/*  */}
        <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="https://juejin.cn#" classname="text-indigo-600 hover:text-indigo-900">Edit</a>
            </td>
          </tr><!-- More rows... --></tbody>
      </table>
      </div>
    </div>
  </code></pre>