VSCode+Vue+Node前端之路（八）企业级项目开发之Axios封装通用后端请求API模块

我们开发过程中都知道，前端数据要访问后端接口，通过接口返回的数据来进行展示，这些接口数据要在前端进行配置，而这些API我们应该封装到统一模块，方便统一管理和调用。

通用API模块创建步骤

1.我们创建通用模块Request.js这要放在src目录下

2.引入axios

import axios from "axios";//引入axios

3.编写请求基础服务，请求地址以及超时时间等

//请求基础服务
const service = axios.create({
//url = baseUrl + requestUrl
baseURL:"http://192.168.31.152:8081",
//配置请求超时时间
timeout: 5*1000
})

4.将模块export暴露出去，别的地方才能引用，这里在提一下export defaulu 和 export的概念：
export default 整个抛出，就是用户的导入的时候直接导入了整个类
export 用户在导入的时候只导入指定模块，而不是整个模块
因为这是基类，用户需要导入整个配置才能使用，所以这里使用export default进行导出

export default service//导出模块 export之后别的地方才能使用

所以这个Request.js的完整代码应该是这个样子的：

import axios from "axios";//引入axios
//请求基础服务
const service = axios.create({
//url = baseUrl + requestUrl
baseURL:"http://192.168.31.152:8081",
//配置请求超时时间
timeout: 5*1000
})
export default service//导出模块 export之后别的地方才能使用

这里只是配置基础url和超时时间，拦截器等更多内容后面在进行配置。

编写API

前面我们已经创建了访问API的基类，那么接下来我们就需要编写我们的API了，

1.先要导入我们之前编写的基类，这里说一下目录层级 ./当前级目录 …/上级目录，所以我们应该是这样子导入的：

import axios from '../request'//引入上级目录下的request ./当前级目录 ../上级目录

2.使用export单独导出每一个接口

3.post接口，看注册接口的注释基本就知道一个接口的结构了，登录接口使用的es6语法，下单接口因为要使用token，所以我们把token拼接到hearder里面

//注册接口
//接口名registerApi
//(phone,pwd,name) 参数
//axios.post 表示post请求
//请求地址 /api/v1/private/user/register
//{} 花括号里面拼接请求参数
export const registerApi = (phone,pwd,name) =>axios.post("/api/v1/private/user/register",{
"phone":phone,
"pwd":pwd,
"name":name
})

//登录接口
export const loginApi = (phone,pwd) => axios.post("/api/v1/private/user/login",{
phone,
pwd
})

//下单接口
//headers因为要使用到token，所以我们把token拼接到hearder里面
export const saveOrder = (token,videoId) => axios.post("/api/v1/private/order/save",{
"video_id":videoId,
},{
headers:{
"token":token
}
})

4.get请求，无参数接口

//轮播图接口
export const getBanner = () =>axios.get("/api/v1/public/banner/index")

5.get请求，有参数接口

//视频详情
export const getVideoDetail = (videoId) => axios.get("/api/v1/public/video/finde_detail_by_id",{
params:{
video_id:videoId
}
})

这就是我们接口的编写模式了，常用的方式都列举出来了。

最后

以上就是美好招牌为你收集整理的VSCode+Vue+Node前端之路（八）企业级项目开发之Axios封装通用后端请求API模块的全部内容，希望文章能够帮你解决VSCode+Vue+Node前端之路（八）企业级项目开发之Axios封装通用后端请求API模块所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。