request.js的编写

该文章展示了如何在Vue项目中引入并配置axios库,包括设置基础URL、超时时间,添加请求和响应拦截器来处理token以及错误处理。同时,文章还封装了HTTP方法,如post、get,以简化API调用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 第一步引入axios

import axios from "axios"

// 第二步引入qs

import qs from "qs"

import storage from "@/utils/storage"

// 第三步 配置根路径 和 超时时间

let newAxios = axios.create({

    baseURL: process.env.VUE_APP_BASE_API,

    timeout: 10000,

})

// 第四步:

// 配置拦截器

// 添加请求拦截器

newAxios.interceptors.request.use(function (config) {

    // 在发送请求之前做些什么

    let token = storage.get("webapp_token")

    if (token) {

        config.headers.Authorization = token

    }

    return config;

}, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

});

// 添加响应拦截器

newAxios.interceptors.response.use(function (response) {

    // 对响应数据做点什么

    // 响应拦截

    //将返回的数据过滤 留下有用的数据返回

    return response.data;

}, function (error) {

    // 对响应错误做点什么

    return Promise.reject(error);

});


 

//第五步:

// 封装方法解决 method对应的传值问题

// 因为这个方法需要将axios返回给别人用

function request(url, method, aaa) {

    return newAxios({

        url,

        method,

        data: method == "post" ? qs.stringify(aaa) : '',

        params: method == "get" ? aaa : ''

    })

}

// 请求有四种

// post登录 / 注册

// get 列表

// delete 删除

// put  修改

// 第六步

function post(url, aaa) {

    return request(url, "post", aaa)

}

function get(url, aaa) {

    return request(url, "get", aaa)

}

// 第七步暴露

export default {

    post,

    get

}

### UniApp `request.js` 使用教程及示例 #### 创建并封装 `uni.request` 在开发过程中,为了简化代码、提高可维护性和统一管理请求逻辑,通常会对 `uni.request` 方法进行统一封装。这不仅有助于减少重复代码量,还能使后续的调试和优化工作更加便捷。 #### 实现步骤 ##### 1. 创建请求封装文件 首先,在项目的合适位置创建一个新的 JavaScript 文件作为请求工具类,命名为 `request.js` 或其他名称以便识别[^2]。 ##### 2. 编写基础配置函数 在此文件内定义一个通用的基础配置对象,默认设置超时时间、错误处理机制等内容: ```javascript // utils/request.js const defaultConfig = { timeout: 10000, // 设置默认超时时长为10秒 }; function handleError(error) { console.error('Request failed:', error); } export const request = (options) => { let config = Object.assign({}, defaultConfig, options); return new Promise((resolve, reject) => { uni.request({ ...config, success: res => resolve(res.data), fail: err => reject(handleError(err)) }); }); }; ``` 此部分实现了基本的功能扩展,允许开发者通过传递不同的选项来自定义每次调用的行为。 ##### 3. 发起 GET 请求实例 当需要获取特定资源的数据时,可以利用上述封装好的 `request` 函数轻松完成操作。下面给出了一段具体的例子来说明如何查询用户信息: ```javascript import { request } from '@/utils/request'; async function getUserInfo(userId) { try { const response = await request.get('/user/info', { userId }, request.defaultConfig)[^1]; console.log(response); } catch (error) { console.error(error); } } ``` 这段代码展示了怎样基于之前建立起来的帮助程序发出带有路径参数 (`userId`) 的 HTTP GET 请求,并对接收到的结果进行了简单处理。 ##### 4. 定义接口方法 对于更复杂的应用场景来说,可能还需要进一步抽象出专门针对某些业务模块的操作API。比如登录功能中的列表加载服务就可以这样设计: ```javascript // login.js import { request } from '@/utils/request'; export function getList() { return request({ url: '/userLogin/list', method: 'GET' })[^3]; } ``` 这里提供了一个名为 `getList()` 的导出函数,它内部调用了前面提到过的全局性 `request` 工具来进行实际通信,从而达到了良好的解耦效果。 #### 总结 通过对 `uni.request` 的合理封装以及灵活运用所构建出来的辅助库,能够显著提升前端应用在网络交互方面的表现力与稳定性。希望以上介绍能帮助到正在学习或使用 UniApp 开发的同学!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值