axios请求封装--封装api

npm i axios 下载axios插件

main.js设置

import axios from 'axios'; //引入axios请求
axios.defaults.withCredentials=true; 为true是跨域时携带用户用户凭证  false不会携带用户凭证

创建request.js文件

import axios from 'axios'
import {
     Message, MessageBox} from 'element-ui'
// var root = process.env.BASE_API
// 创建axios实例
const service = axios.create({
     
  baseURL: '/manager', // api的base_url
  timeout: 35000, // 请求超时时间
  headers:{
     
    'Account':localStorage.getItem("accountnumber"),
    'Authorization':'Bearer '+localStorage.getItem("authorization"),
  },
});


// request拦截器
// service.interceptors.request.use(config => {
     
//   // if (store.getters.token) {
     
//   //   config.headers['Authorization'] = getToken();  // 让每个请求携带自定义token 请根据实际情况自行修改
//   // }
//   config.url=root+config.url
//   console.log(config.url)
//   return config
// }, error => {
     
//   // Do something with request error
//   // console.log(error) // for debug
//   // Promise.reject(error)
// })

// respone拦截器
let count = 0;
service.interceptors.response.use(
  response => {
     
    const res = response.data;
    if (res.code !== 200) {
     
      // 401:未登录;
      if (res.code === 600) {
     
        if(count==0){
     
          MessageBox.confirm('该用户访问超时，请重新登录', '访问超时提示', {
     
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          })
        }
        ++count; 
      }else if(res.code===400){
     
        MessageBox.alert(res.message,'提示',{
     
          confirmButtonText:'好的',
          type:'error'
        })
        return response;
      }
      else if(res.code===405){
     
        MessageBox.alert('操作过于频繁，请稍后操作','提示',{
     
          confirmButtonText:'好的',
          type:'error'
        })
        return response;
      }
      // return Promise.reject('error')
    } else {
     
      return response;
    }
  },
  error => {
     
    console.log(error);
    console.log('err' + error)// for debug
    Message({
     
      message: error.message,
      type: 'error',
      duration: 3 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

api统一管理 创建api.js

import request from '@/utils/request'  //引入request文件

//请求
export function 请求名() {
     
  return request({
     
    url:'',//请求地址后缀
    method:'get',  //设置请求方式  get post 
  })
}
//如果需要把参数放到请求地址上
export function 请求名(params) {
     
  return request({
     
    url:''+params,
    method:'get',
  })
}
//如果需要放固定参数
export function 请求名(params) {
     
    return request({
     
      url:'',
      method:'get',
      params:{
     参数名:params}
    })
}

如果需要设置前端代理 创建vue.config.js文件

module.exports = {
     
  
  dev: {
     
    assetsPublicPath: '/',
    proxyTable: {
     
      '/api': {
     
        // target: `请求接口域名`,
        changeOrigin: true,
        pathRewrite: {
     
          "^/api": '/'
        }
      }
    },
}

特别注意

如果请求地址和前端页面不在同一服务器 跨服务的情况下,需要nginx配置一下反向代理 不然接口请求会404找不到接口,这个需要给后端同志说明一下