#vue# 接口封装!超详细超简单的请求接口方法

在前端开发中,请求接口,是必不可少的一个环节,

请求接口,通俗来说,就是我们通过请求服务器的数据,来达到响应式地渲染数据

那如何请求接口,才会更高效且简单呢?

以下方法可以参考借鉴借鉴

一.接口文档目录位置

可以参考这个目录,进行文档的存放

#vue# 接口封装!超详细超简单的请求接口方法_第1张图片

 二.思路

封装接口主要分为4个版块

(1)环境(本地/测试/正式)切换

(2)域名拼接

(3)封装数据接口

(4)调用数据接口

三.具体思路

(1)地址环境切换

 1-1)首先在实际的开发过程中,

一般来说,后端会提供3个地址给到我们,

分别是本地地址、测试环境地址、正式环境地址

然后我们设置一个域名变量

再通过三元表达式来进行本地/测试 以及 本地/正式环境的切换

demo示例

// // 本地/测试环境地址
const BASE_API_URL = process.env.NODE_ENV === 'development' ? '本地地址,后端给你' : '测试地址,后端给你'

// // 本地/正式环境地址
const BASE_API_URL = process.env.NODE_ENV === 'development' ? '本地地址,后端给你' : '正式地址,后端给你'

1-2)当我们npm run dev 让项目跑起来的时候

npm run dev 就与process.env.NODE_ENV === 'development' 内部配置是全等状态,

所以就会执行本地地址 !

如果我们是想要打包(npm build )的话,

npm build 就与process.env.NODE_ENV === 'development' 不一致

所以就会执行后面的测试/正式环境地址

1-3)最后,我们通过写两个三元表达式,把测试和正式环境的地址进行区分开来, 

当后端同事要求我们更新测试环境时(就是npm build打包的时候)

我们需要把正式环境的那个三元表达式隐藏,反之

#vue# 接口封装!超详细超简单的请求接口方法_第2张图片

(2)域名拼接

配置完内部环境地址之后, 我们需要进行域名拼接

demo示例:

import { BASE_API_URL } from '@/config' //(需要加上域名的路径)

class Apis {
    //域名 
    API_URL = BASE_API_URL 
   //定义一个新的域名变量,来将我们内部配置环境的域名变量(BASE_API_URL)赋到里面

    //首页数据
    indexIndex = `${this.API_URL}/index/index`

    //学习列表
    articleIndex = `${this.API_URL}/article/index`
    // 定义一个接口变量(articleIndex),
    // 然后将上面定义的新域名变量(API_URL),进行运用,
    // 后面的/xxx/xxx是后端同事给我们的接口文档里的地址

    //学习详情
    articleDetail = `${this.API_URL}/index/detail`

    //学习列表
    joinIndex = `${this.API_URL}/course/index`

    //上传类
    uploadFile = `${this.API_URL}/tools/upload`
}

class User {
    //域名
    API_URL = BASE_API_URL
    //个人基本信息
    userIndex = `${this.API_URL}/user/index`
    //修改密码模块
    userPassword = `${this. API_URL}/user/password`
    //上传个人信息模块
    userUpdate = `${this.userURL}/user/index`


}

const apis = new Apis()  //细分版块
const user = new User()

export {
    apis,   //进行引入
    user
}

(3)封装数据接口

demo 示例

import Http from '@/assets/js/http'
import { apis } from '@/assets/js/apis'  //进行引入域名拼接的地址
import {user} from '@/assets/js/apis'
const indexIndex = (data) => {
    return Http.get(apis.indexIndex, data)
}
// const 请求 = (传进来的参数) => {
//     return Http.get(后端给定的完整地址, 传进来的参数)
 }

const articleIndex = (data) => {  
//articleIndex:是一个我们自定义的函数接口变量
//data:代表的是我们后端文档里,在请求接口前,需要传入的参数,例如page、limit 拿第几页的数据
    return Http.get(apis.articleIndex, data) 
//apis.articleIndex:就是我们前面进行域名拼接的地址,也是完整地址
//data:就是传进来的参数
}

const articleDetail = (data) => {
    return Http.get(apis.articleDetail, data)
}

const userIndex = (data) => {
    return Http.get(user.userIndex, data)
}

const  userUpdate = (data) => {
    return Http.post(user.userUpdate, data)
}


const joinIndex = (data) => {
    return Http.get(apis.joinIndex, data)
}

const password = (data) => {
    return Http.post(user.userPassword,data)
}

const toolsUploadImg = (data) => {
    return Http.post(apis.uploadFile,data)
}

export {    //进行引入
    indexIndex,
    articleIndex,
    articleDetail,
    joinIndex,
    userIndex,
    userUpdate,
    password,
    toolsUploadImg
}

(4)具体页面请求接口

完成前面3个步骤以后,我们的接口就已经完成封装了

所以在页面的任何一个位置,我们都可以进行调用

下面是示例

首先,先调用接口数据:


getInfo(i) {
    articleIndex({ 
        limit_rows:15, 
        page: i 
    }).then(res => { 
        let myData = res.data;
        this.linklist = myData.list;
        this.totalPage = myData.total_page;
        this.totalNumber = myData.total_number
    })
},

解析:

getInfo(i) {
    articleIndex({ 
   //这个是第三步封装好的数据接口
   //articleIndex:这个是第三步我们自定义的那个函数接口变量
   //data:里面是传进来的参数,就是后端接口文档里面的参数(前半部分)就是下面这些总条数,页数参数
        limit_rows:15, //总条数
        page: i //第几页
    }).then(res => { //这个是后端接口文档里面的具体数据
        let myData = res.data; 
        this.linklist = myData.list;
        this.totalPage = myData.total_page;
        this.totalNumber = myData.total_number
    })
},
然后,在需要数据渲染的位置,进行动态渲染(就是把数据填入)
  • //item:就是指数据里面具体到某一条数据

以上就是前端接接口的全部步骤和思路了,可参考借鉴,大神们如果有更好的思路也请多多指教!

你可能感兴趣的:(请求接口,web(pc端),接口,设计模式,javascript,前端,webpack)