最最简单的axios二次封装

第一步先在src文件创建一个request文件夹

第二步在该文件下创建2个文件,一个为request.js,一个叫api.js

第三步,在request文件下引入axios,并且创建一个实例代码如下

import axios from "axios";
const instance = axios.create({
    // 设置通用请求头
        baseURL:'https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app',
        // 配置请求头
        // headers:{
        //     // 改为json格式 
        //     'Content-Type':'application/json'
        // },
        // 超时相应
        timeout:4000,
    })
    
    // 暴露出去
    export default instance;

第四步,在api.js文件内写入

// 导入requesr

import request from './request'

// 轮播图   箭头函数写法
export const bannerAPI = () => request({
    url:'/banner',
    method:"get",
    // params
})

// 普通函数写法
//export const bannerAPI = function () {
 //   return request({
  //      url:'/banner',
   //     method:"get"
   // }) 
    
//}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Axios 是一个基于 Promise 的 HTTP 请求库,它可以用于浏览器和 Node.js 环境中。Axios 既支持简单的 GET 请求,也支持复杂的 RESTful API 请求。为了更方便地使用 Axios,我们可以对其进行二次封装。 以下是一个简单Axios 二次封装示例: ```javascript import axios from 'axios'; // 创建一个 Axios 实例 const instance = axios.create({ baseURL: 'http://api.example.com', // 设置请求的 base URL timeout: 10000, // 设置请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( (config) => { // 在发送请求之前做些什么 // 添加 token 等操作 return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response) => { // 对响应数据做点什么 const data = response.data; if (data.code !== 200) { // 处理错误 alert(data.msg); return Promise.reject(data); } return data.data; }, (error) => { // 对响应错误做点什么 alert(error.message); return Promise.reject(error); } ); export default instance; ``` 在以上代码中,我们首先通过 `axios.create` 方法创建了一个 Axios 实例,然后对其进行了一些配置,例如设置了请求的 `baseURL` 和超时时间。 接着,我们分别定义了请求拦截器和响应拦截器。请求拦截器可以在发送请求之前,对请求进行一些处理,例如添加 token 等操作。而响应拦截器则可以对响应数据进行一些处理,例如统一处理错误信息。 最后,我们将封装好的 Axios 实例导出,以便在其他模块中使用。 在实际项目中,我们可以根据具体需求对以上代码进行修改和扩展,以满足不同的请求场景。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值