axios封装

121 阅读1分钟
    封装
   // 1 导入axios   pnpm i axios -S

    import axios from 'axios'


    // 2 创建axios实例

    const ins = axios.create({

      baseURL: '/ftyyptapi', // 切记URL是大写

      timeout: 6000,  //超时时间

        // 设置请求头

      headers: {

        //'content-type', 'application/json')  

         // 如果参数是 json字符串, 需要这样书写


       //  'content-type', 'application/x-www-form-urlencoded')  

        // 如果参数是查询字符串, 需要这样书写


        'Content-Type': 'application/x-www-form-urlencoded'

      }

    })


    // 3 拦截器

    ins.interceptors.ins.use(

      (ins) => {

        ins.headers['token'] =

    JSON.parse(localStorage.getItem('userinfo')).token ||      
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJpYXQiOjE3MTE5NjE0MzN9.rd
    6XJ9n9KGcEa0k5hCukbbPn57l9q6M44ASCPU64ccs'

        return ins

      },

      (error) => Promise.reject(error)

    )

    ins.interceptors.response.use(

      (response) => {

        // return response

        return response.data

      },

      (error) => Promise.reject(error)

    )


    // 4 导出

    export default ins
    
    
    
    
    
    
    
    
    
    
    
    
    
    

vite文件最后的位置

    server: {

        proxy: {
           // 封装重点axios是ftyyftyyptapi时
           // 转到http://qf.ft.learv.com
           //并把ftyyptapi 删除
          '^/ftyyptapi/.*': {

            target: 'http://qf.ft.learv.com',

            changeOrigin: true,

            rewrite: (path) => path.replace(/^\/ftyyptapi/, '')

          },

          '^/dcmapi/.*': {

            target: 'https://qf.dcm.learv.com:3005',

            changeOrigin: true,

            rewrite: (path) => path.replace(/^\/dcmapi/, '')

          }

          // ...

        }

      }
      
      
      

使用一个文件夹里面设置函数

      import ins from "@/utils/request"
      export const postLoginApi=(data)=>{

          return ins({

            url:"/user/login",

            method:"post",

            data

          })

        }