vue api接口统一管理

api 接口封装

首先创建utils文件夹，创建request.js,这个文件主要是做请求拦截或者响应请求。

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import { getToken } from '@/utils/auth' //这个是获取token值，获取即可
//import Qs from 'qs' //如果需要转换
   
// 创建 axios 实例
const service = axios.create({
  baseURL:process.env.baseURL, // 环境的不同，对应不同的baseURL
  // transformRequest: [function(data) {
  //   return Qs.stringify(data)
  // }],
  timeout: 5000 // 请求超时时间
})

//请求拦截
service.interceptors.request.use(
  config => {
    var token = getToken();//获取token
    if(token){
      config.headers['Authorization'] = getToken();//加请求头
    }
    return config
  },
  error => {
    // do something with request error
    return Promise.reject(error)
  }
)


//响应拦截
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 1) { //code返回参数根据实际后端返回参数
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
    }   
      return res
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    //这里还可以根据实际情况增加一些功能
    return Promise.reject(error)
   }
)

export default service

接下来是创建api文件夹，建议根据模块来分别建立文件,例如首页home.js，实际传参格式根据后端接口格式来定

//引用第一步创建的request.js文件
import request from '@/utils/request'
// get例子（带参）
export function getCarList(params) {
  return request({
    url: '#',
    method: 'get',
    params
  })
};

// delete例子（带参）
export function carDeleteRow(id) {
  return request({
    url: '#' + id,
    method: 'delete'   
  })
};

//put例子（带参）
export function carAudit(data,id) {
  return request({
    url: '#' + id,
    method: 'put',
    data
  })
};

//post
export function addCar(data) {
  return request({
    url: '#',
    method: 'post',
    data
  })
};

具体页面的应用

import { xxxx } from "../../api/home";
xxxx(参数).then( res => {
	//返回参数
  	console.log(res)
});

这样大概就封装好了,这样大概改接口比较方便或者相同接口复用性高，如果有问题或者优化欢迎赐教。

最后

以上就是欣慰薯片为你收集整理的vue api接口统一管理的全部内容，希望文章能够帮你解决vue api接口统一管理所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。