vue3 简单请求封装，引入 使用

首先确保项目里边的已经安装了 axios

 

封装简单的请求 axios.js文件

import axios from "axios"        //引入axios
import qs from "qs"             //引入qs插件，用来转换参数的类型，也可以不引用，使用JSON.stringify()和JSON.parse()

// 封装请求项
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';            //设置post请求头
// axios.defaults.withCredentials = false;                                   //在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookie
 
const instance = axios.create({                                             //创建axios实例，请求超时时间为30秒
 timeout: 30000,
});
 
//请求和响应拦截可以根据实际项目需求进行编写
instance.interceptors.request.use((config) => {                             // 请求发起前拦截
//这里可以对接口请求头进行操作 如：config.headers['X-Token'] = token
 console.log("请求拦截",config);
 return config;
}, (error) => {
 // Do something with request error
 return Promise.reject(error)
})
 
instance.interceptors.response.use(response => {                    // 响应拦截（请求返回后拦截）
 console.log("响应拦截",response);
 return response;
}, error => {
 console.log('catch', error)
 return Promise.reject(error)
})

// 可以在文件的上方或者全局env 里边创建一个公用的请求域名，然后跟下方的url进行字符串拼接,
// 此处使用了vue.config.js里边全局配置的代理配置，直接将域名放到里面，请求就不会有跨域问题
const apiAxios = {
    get(url, data) {        //url:请求路径  data,请求参数（）
        return instance.get(url,{params:data})
    },
    post(url, data) {       //url:请求路径  data,请求参数（字符串类型）     qs.stringify(data):使用方法转换为字符串
        return instance.post(url,qs.stringify(data))
    }
}
// export default  {apiAxios}   //如果导出放到对象里边，引入的时候引入的也是一个对象，import A from "@/axios/axios1",如果要使用里面的方法，需要  A.apiAxios.get()
export default  apiAxios        //如果直接导出对象的名字，import A from "@/axios/axios1"    ，使用的时候是， A.get()

 

 

使用请求的vue文件页面，list.vue

<template>
  <div>有请求的页面</div>
</template>

<script >
import { defineComponent,ref } from "vue"
import apiAxios from "@/axios/axios1"     //引入封装有请求的js文件

export default defineComponent({
  setup() {
    // console.log(apiAxios,"打印出引入的文件")
    // 数据获取
    const getList = ()=>{
      let params = {
        page:'1',        //分页
      }
      apiAxios.get('/apiTot/work/search',params).then(res=>{
        if (!res) return
        console.log(res)  //打印出请求回来的信息
      })
    }
    getList()   //直接调用请求方法

    return {
      getList   //vue3的规则，return 出方法名，才可以@click="getList()"
    }
  }
})
</script>

<style lang="scss" scoped>
</style>

 

在项目的根目录下的vue.config.js文件内可以设置全局配置

 

// vue.config.js
module.exports = {
 // 输出文件目录
 outputDir: "dist",
 // eslint-loader 是否在保存的时候检查
 lintOnSave: false,
 // 基本路径
 publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
 devServer: {
 host: "localhost",
 port: 8080,
 open: true,
 hotOnly: true, // 热更新
 // 设置代理
 proxy: {
  "/apiTot": {
  // 本地mock服务器
  target: "https://www.xxxx.com/xxx/",
  changeOrigin: true,
  ws: false,                
  },
  //如果项目中存在多个域名接口，可依次进行配置
    "/apib":{
        target: "https://www.xxxx.com/xxx/",
        changeOrigin: true,
        ws: false,
    },
 }, 
 },
};

 

参考来源：https://www.jb51.net/article/202891.htm