vue项目中如何封装api，使请求方法清晰，适合协作开发

Posted 2021-02-19 古墩古墩

以下是模仿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)
    })

完

 

 

 

.