vue項目中如何封裝api，使請求方法清晰，適合協作開發

以下是模仿element-admin框架中的那種模式，感覺非常好用，所以就搬到了自己的項目中，在此記錄以下。

首先我們需要有一個request.js:(封裝axios的攔截器，並返回axios實例對象)

import axios from 'Axios';
import tools from '@/utils/tools';

// 創建一個axios實例
const service = axios.create({
    baseURL:"", // url = base url + request url
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 10000 // request timeout 10s
});

// 請求攔截器
service.interceptors.request.use(config => {
    // do something before request is sent
    return config;
},error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error);
});

// 響應攔截器
service.interceptors.response.use(response => {
    //do something before response
    if (response.status >= 200 && response.status <= 210) {
        return response;
    } else {
        //不走
    }
},
error => {
    console.log('err' + error); // for debug
    tools.error(error);
    return Promise.reject(error);
})

export default service;

比如說要將用戶相關的請求方法放在user.js中，（這樣隨着項目的變大，會比較清晰）

user.js:

import request from '@/utils/request';
import proxy from '@/utils/proxy';

export function login(data) {//例子
    return request({
        url: proxy.lichao+'/user/login',
        method: 'post',
        data
    })
}
  
export function getInfo(token) {//例子
    return request({
        url: proxy.lichao+'/user/info',
        method: 'get',
        params: { token }
    })
}

export function getToken(){//獲取token
    return request({
       url:proxy.xuehui+"/qiniu/token",
       method:"get",
       params:null,
    })
}

注意到有一個proxy.js是搞代理的

proxy.js

const onlineIP = window.location.origin

//全局變量
const lipeng =
  process.env.NODE_ENV === "production" ? onlineIP + "/qiantai" : "qiantai"
const xuehui =
  process.env.NODE_ENV === "production" ? onlineIP + "/qiantai" : "qiantai"
const lichao =
  process.env.NODE_ENV === "production" ? onlineIP + "/qiantai" : "qiantai"

export default {
  lipeng,
  xuehui,
  lichao
}

比如在頁面洪使用：

import {getToken} from "@/api/user";

getToken().then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })

完

 

 

 

.