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

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

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

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

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

一.接口文档目录位置

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

 二.思路

封装接口主要分为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打包的时候），

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

（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:就是指数据里面具体到某一条数据 
        

            ·  {{item.title}}
        
        

            
{{item.create_time}}
        
    

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