简单的三种封装调用接口模式（Body、params、服务端的PathVariable）超级大汇总—

首先我们来看第一种，最简单的，一般是直接在url地址上面拼接的方式

温馨提示

这种方式对应的就是服务端的PathVariable模式

/**
 * 删除文章
 */
    return request({
        method: 'DELETE', 
        //接口文档中的写的路径参数需要在 url 中传递
        //凡是看见接口路径中有的:xxx格式的字段，则需要传递路径参数 
        url:`/mp/v1_0/articles/${articleId}`,
        //Boda参数使用data设置
        //Query参数使用params设置
        //Headers参数使heades设置
        //
    })
}

vue的位置进行调用

import { getArticles,getArticleChannels,deleteArticle } from '@/api/article'

js位置添加如下即可调用

    deleteArticle(articleId).then(res =>
           {
          //删除成功，更新当前页的文章数据列表
          this.loadArticles(this.page)
          })

第二种，params模式，一般是www.dabaicai/aaa?bbb=cccc 这种地址拼接模式

温馨提示

这种模式一般都是需要添加许多的参数，也可以理解为条件操作的意思，不过本质上还是拼接在url上面的，也不会很复杂！

export const getArticles = params => {
    return request({
        method: 'GET',
        url:'/mp/v1_0/articles',
        //Boda参数使用data设置
        //Query参数使用params设置
        //Headers参数使heades设置
        params
    })
}

vue的位置进行调用

import { getArticles,getArticleChannels,deleteArticle } from '@/api/article'

js位置添加如下即可调用

       getArticles({
              page,
              per_page : this.pageSize,
              status:this.status,
              channel_id:this.channelId,
              begin_pubdate: this.rangeDate ? this.rangeDate[0] :null, //开始日期
              end_pubdate: this.rangeDate ? this.rangeDate[1] : null //截止日期
              
            }).then(res => {
      })

第三种，Body模式，一般是服务端需要传一个对象过去，比如说一个用户对象 user 里面会包含很多东西，可以做很多复杂的实现！

温馨提示

这个data就是body的意思了

 export const addArticle = (data,draft = false) => {
    return request({
        method: 'POST',        
        url:'/mp/v1_0/articles',
        params:{
            draft//是否存为草稿(true为草稿)

        },
        data
        
    })
}

vue的位置进行调用

import {getArticleChannels,addArticle,getArticle,updateArticle} from '@/api/article'

js位置添加如下即可调用

  addArticle(this.article,draft).then(res => {
            
          //处理响应结果
          this.$message({
            message:`${draft ? '存入草稿' : '发表'}成功`,
            type:'success'
          })
          //跳转到内容管理页面
          this.$router.push('/article')
        })

本文作者为DBC，转载请注明。