博客 / 詳情

返回

怎麼寫接口請求?@zeesuu/service來幫你。

接口交互開發是做為一個互聯網產品肯定要面對的事情。
記得之前去一家公司看打到過老代碼,在一個Service文件夾下,全部都是將API地址封裝成了一個一個方法。

export const getOneInfo = () => {
    return axios.get('/one/info')
}

export const getTwoInfo = () => {
    return axios.get('/two/info')
}

// ...

可能他們是覺得為了封裝成service然後重複利用這個請求。
但是反而帶來幾個問題

  1. 新增接口就需要手動生成一大坨模板代碼,真正有用的其實就是不一樣的接口地址而已。
  2. 接口修改之後,方法名要麼跟着變,要麼就和接口地址出現不一樣。

@zeesuu/service 可以將接口封裝簡化,也減少上面的問題出現。

$ npm install @zeesuu/service -S
// main.js
import ZeesuuService from ' @zeesuu/service';

// 將所有的API統一管理
const APIs = [
// 格式為: apiUrl | method | alias

// apiUrl 為必填, method 不填時默認為get, alias 選填
'/user/login|post|UserLoginFunction',

// 默認get 方法
'/user/info',

// 這個例子只有apiUrl和alias,method部分默認為get,但是要給到兩個豎線作為分隔
'/user/list||AllUserList',

// 這個例子適合RESTful的url設計
'/video/upload/(id)/delete/(pid)|post',

// 這個例子適合配置其他域名下的請求地址
'http://www.xyz.com/aaa/bbb',
'https://www.xyz.com/ccc/ddd',
];

// 配置
Vue.use(ZeesuuService, {
  $http: axios, //自己封裝好的請求對象

  apis: APIs,

  // 可選配置項, 默認是''。 依據$http配置的請求對象來
  appRoot: 'http://www.xyz.com/',

  // 可選配置, 默認是false, 小程序的請求參數結構和axios不一樣。
  isMini: true,

  // 打開調試,可以顯示所有已經轉換的service
  debug: true,
});

<tempalte>
...
</template>

<script>
   export default {
      mounted() {
        // 使用@zeesuu/service後
        
        // APIs中的 '/user/login|post|UserLoginFunction', 自動封裝成以下方法
        this.$service.UserLoginFunction({})
            .then(res => {})
            .catch(err => {})
        
        // APIs中的 '/user/Info'自動封裝成以下方法
        this.$service.UserInfo()
            .then(() => {})
            .catch(err => {})
        
        // 使用絕對路徑的API配置轉化,注意 https/http
        this.$service.HttpAaaBbb()
        this.$service.HttpsCccDdd()
      }
   }
</scritp>
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.