Vue项目封装请求数据的接口总结

柔情只为你懂 2023-06-27 11:23 18阅读 0赞

# [Vue项目封装请求数据的接口总结][Vue] #

最近开始了第一份工作，对于前端新手小白，以前的惯用做法都是直接在需要的页面写请求数据的接口。但是因为项目中会频繁的请求后台，所以将所有的请求封装起来，方便管理。

**一、配置url（可以放在一个js中）**

1.  引入axios：import axios from “axios”
2.  配置url

const service=axios.create(\{

baseURL:请求的地址,

timeout:5000     //访问超时的时间限制

\});

1.  抛出（如果是新起的js文件）：export default service;

**二、写接口的文件（js文件）**

1.  将配置url和axios引入：（例如配置的url文件叫request.js）

2.配置各个接口：(例如叫business.js)

Get请求：

export function testGet(参数)\{

return request(\{

method:’get’,

url:’具体接口’,

params:\{

//json格式，如果有就写，没有就去掉。

\}

\})

\}

Post请求：

export function testPost(参数)\{

const data=\{\}  //写要传递的参数，json格式

return request(\{

method:’post,

url:’具体接口’,

datatype:’json’,

data

\})

\}

**三、使用**

1.引入：import   \{要引入的方法名字\}   from   business.js

2.使用

TestGet().then(res=>\{  //成功进这个 \}).catch(err=>\{ //报错进这个\});

放在当前页面使用的方法里。

[Vue]: https://www.cnblogs.com/zyl96/p/11532174.html

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目-封装API接口

.在/src/下创建一个js文件 AxiosAsk.js import Vue from 'vue' import axios from 'axios'...

曾经终败给现在/ 2024年04月17日 14:13/ 0 赞/ 76 阅读

相关微信小程序请求数据的接口封装

接口封装的request.js文件内容如下： //项目URL相同部分，减轻代码量，同时方便项目迁移 //这里因为我是本地调试，所以host不规范，实际上应该

ゝ一世哀愁。/ 2023年07月03日 12:18/ 0 赞/ 11 阅读

相关 Vue项目封装请求数据的接口总结

[Vue项目封装请求数据的接口总结][Vue] 最近开始了第一份工作，对于前端新手小白，以前的惯用做法都是直接在需要的页面写请求数据的接口。但是因为项目中会频繁的请

柔情只为你懂/ 2023年06月27日 11:23/ 0 赞/ 19 阅读

相关 vue请求封装

[https://segmentfault.com/a/1190000016146893][https_segmentfault.com_a_1190000016146893]

逃离我推掉我的手/ 2023年06月18日 02:52/ 0 赞/ 13 阅读

相关 Vue项目 axios请求封装+接口封装

前言：接口进行封装，方便后期维护 > 先封装axios ( utils => axios.js ) import axios from "axios" i

我会带着你远行/ 2023年01月18日 04:08/ 0 赞/ 319 阅读

相关 vue请求数据接口

请求接口： getList() { member_input(this.page, this.per_page).then((res) =>

Bertha 。/ 2022年10月05日 08:57/ 0 赞/ 233 阅读

相关 Vue项目—请求函数的封装

Vue项目—请求函数的封装 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NE

骑猪看日落/ 2022年09月11日 04:14/ 0 赞/ 163 阅读

相关 vue 网络请求数据封装

<script type="text/javascript"> // 配置API接口地址 const baseUrl = '';

妖狐艹你老母/ 2021年09月17日 22:18/ 0 赞/ 510 阅读

相关 uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

[另一篇全面封装文章][Link 1] [资源文章下载地址][Link 2] 1.正常使用uni.request()发送请求(未封装) get() {

淩亂°似流年/ 2021年09月07日 06:19/ 0 赞/ 1587 阅读

相关 vue.js、uniapp两种封装接口请求方法

前言：分别有两种封装方法适用于vue.js和uniapp；第一种：全局注册，通过this调用，不需要import引入js文件。第二种：需要请求接口的页面还要import一下。

超、凢脫俗/ 2021年07月24日 19:03/ 0 赞/ 1386 阅读