创建Vue项目之axios

下载

npm install axios

config.js配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
            target: 'http://1localhost:8080/', //接口域名，端口看各自设置的
            changeOrigin: true,             //是否跨域
            pathRewrite: {                  //路径重置
                '^/api': ''
            }
        }
      },
    }
})

创建axios文件夹，封装axios

import axios from 'axios';
import router from '@/router';
const service = axios.create({
  baseURL: '/api',
  timeout: 15000
})

//请求头 token 封装
service.defaults.headers.post['Content-Type'] = 'application/json';
service.interceptors.request.use(
  config => {
    
    //获取token是否存在
    return config;
  },
  error => {
    return Promise.reject(error)
  }
);
// http response l拦截器
service.interceptors.response.use(
  response => {

    if (response.status === 200) {
      
        return response
      }
      else {
       
          router.replace({
            path: "/",
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
          return Promise.reject();
        }else if (response.data.code == '020001') {
       
   
           
          router.replace({
            path: "/",
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
        } else {
      
          return Promise.reject();
        }
      }
    }
    else {
      return response
    }
  },
  error => {

  
    router.replace({
      path: "/",
      query: {
        redirect: router.currentRoute.fullPath
      }
    })
    return Promise.reject(error.response);
  }
)
//get
export function get(url, params = {}) {
  console.log("get====")
  console.log(url,params)
  return new Promise((resolve, reject) => {
    service.get(url, {
      params: params
    }).then(response => {
     
      resolve(response.data)
    }).catch(err => {
      reject(err)
    })
  })
}
//post
export function post(url, data = {}) {
  console.log("post====")
  console.log(url,data)
  return new Promise((resolve, reject) => {
    service.post(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}
//downLoad
export function downLoad(url, data = {}) {
  console.log("post====")
  console.log(url,data)
  return new Promise((resolve, reject) => {
 console.log(service)
 service.defaults.timeout=5000000
    service.post(url, data,{responseType:'blob'})
      .then(response => {
        resolve(response);
      }, err => {
        reject(err)
      })
  })
}
export default service