如何在項目中封裝api

一般在項目中，會有很多的api請求，無論在vue，angular，還是react中都應該把接口封裝起來，方便后期的維護。

1.新建一個api文件

我們可以在項目的分目錄下創建一個api文件夾，在這里面管理我們項目中會 用到的api接口

 

 

 

2.了解為啥要封裝請求？

 先來看下官方文檔中的請求發送，如果每發一次請求，都得寫這么一長串的代碼，還挺折磨人的。。。

從中我們可以看到，請求中的methos是字符串，url也是字符串，只有data是變化的，既然是字符串那應該不怎么會變動，能不能想辦法封裝一下？

 

3.一步一步封裝

請求發送的方式methos，常用的有四種：'get', 'post','put','delete'，我們想辦法先省去每次axios中配置method，既然要省略method，那就得封裝axios，動手

（1）在api文件下新建manage.js文件

（2）引入axios，封裝axios

 

 接下來我們在另一個文件引用這個，來看下效果：

 

 有的人可能會覺得，這好像沒啥，感覺跟寫不寫method，好像區別不大，但這是封裝的一個思路

另外我們還能發現，這個url也是個字符串，如果后台改了登錄接口地址，我得在這里修改url地址，最起碼比寫在登錄頁面下去找發送地址，然后修改要快的多

接下來動手封裝一下url路徑，畢竟一個項目中的接口地址，沒有幾百也有幾十，我們不能把他們分散在項目的各個地方，最好能統一放在一起，也方便我們的管理

（1）在api文件下，新建一個index.js目錄

（2）把我們用到的api地址都寫在這里，然后導出

 

 如果有更多的內容，就都添加在api的對象中就可以了

現在我們method和url地址都封裝了，來看看我們怎么使用封裝后的結果

（1）新建一個api.js文件，導入manage.js中的方法 和 index.js中的api地址

（2）寫好請求方法后導出

 

 

 但是這每寫一個請求就是三行，然后導出，感覺還挺占位置的

 

 

 寫成這樣感覺也不錯，兩行，不然寫成下面這樣

 

 

 4.最后的樣子

一個api文件下三個子文件

api.js是實際用到的請求地址，index.js是url地址存放的地方，manage.js是封裝axios的地方

 

 

 每個頁面的樣子

index.js:

const api = {
    login: '/login'
}

export default api

 

manage.js

import axios from 'axios'

export function postAction(url, parameter) {
    return axios({
        url: url,
        method: 'post',
        data: parameter
    })
}

export function getAction(url, parameter) {
    return axios({
        url: url,
        method: 'get',
        params: parameter
    })
}

export function deleteAction(url, parameter) {
    return axios({
        url: url,
        method: 'delete',
        params: parameter
    })
}

export function putAction(url, parameter) {
    return axios({
        url: url,
        method: 'put',
        data: parameter
    })
}

 

api.js

import {postAction, deleteAction, getAction, putAction} from "./manage";
import api from 'api'

export const login = (params) => postAction(api.login, params);

export {
    login
}

 

 

如有不對的地方，歡迎指正修改！