vue3简单请求封装，引⼊使⽤
⾸先确保项⽬⾥边的已经安装了 axios
封装简单的请求 axios.js⽂件
1 import axios from "axios"        //引⼊axios
2 import qs from "qs"            //引⼊qs插件，⽤来转换参数的类型，也可以不引⽤，使⽤JSON.stringify()和JSON.parse()
3
4 // 封装请求项
5 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';            //设置post请求头
6 // axios.defaults.withCredentials = false;                                  //在跨域请求时，不会携带⽤户凭证；返回的 response ⾥也会忽略 cookie
7
8 const instance = ate({                                            //创建axios实例，请求超时时间为30秒
9  timeout: 30000,
10 });
11
12 //请求和响应拦截可以根据实际项⽬需求进⾏编写
13 quest.use((config) => {                            // 请求发起前拦截
14 //这⾥可以对接⼝请求头进⾏操作如：config.headers['X-Token'] = token
15  console.log("请求拦截",config);
16  return config;
17 }, (error) => {
18  // Do something with request error
19  ject(error)
20 })
21
22 sponse.use(response => {                    // 响应拦截（请求返回后拦截）
23  console.log("响应拦截",response);
24  return response;
25 }, error => {
26  console.log('catch', error)
27  ject(error)
28 })
29
30 // 可以在⽂件的上⽅或者全局env ⾥边创建⼀个公⽤的请求域名，然后跟下⽅的url进⾏字符串拼接,
31 // 此处使⽤了fig.js⾥边全局配置的代理配置，直接将域名放到⾥⾯，请求就不会有跨域问题
32 const apiAxios = {
33    get(url, data) {        //url：请求路径  data，请求参数（）
34        (url,{params:data})
vue json字符串转数组35    },
36    post(url, data) {      //url：请求路径  data，请求参数（字符串类型）    qs.stringify(data)：使⽤⽅法转换为字符串
37        return instance.post(url,qs.stringify(data))
38    }
39 }
40 // export default  {apiAxios}  //如果导出放到对象⾥边，引⼊的时候引⼊的也是⼀个对象，import A from "@/axios/axios1"，如果要使⽤⾥⾯的⽅法，需要  ()
41 export default  apiAxios        //如果直接导出对象的名字，import A from "@/axios/axios1"    ，使⽤的时候是， A.get()
使⽤请求的vue⽂件页⾯，list.vue
1<template>
2<div>有请求的页⾯</div>
3</template>
4
5<script >
6 import { defineComponent,ref } from "vue"
7 import apiAxios from "@/axios/axios1"    //引⼊封装有请求的js⽂件
8
9 export default defineComponent({
10  setup() {
11// console.log(apiAxios,"打印出引⼊的⽂件")
12// 数据获取
13    const getList = ()=>{
14      let params = {
15        page:'1',        //分页
16      }
17      ('/apiTot/work/search',params).then(res=>{
18if (!res) return
19        console.log(res)  //打印出请求回来的信息
20      })
21    }
22    getList()  //直接调⽤请求⽅法
23
24return {
25      getList  //vue3的规则，return 出⽅法名，才可以@click="getList()"
26    }
27  }
28 })
29</script>
30
31<style lang="scss" scoped>
32</style>
在项⽬的根⽬录下的fig.js⽂件内可以设置全局配置
1 // fig.js
ports = {
3  // 输出⽂件⽬录
4  outputDir: "dist",
5  // eslint-loader 是否在保存的时候检查
6  lintOnSave: false,
7  // 基本路径
8  publicPath: v.NODE_ENV === "production" ? "./" : "/",
9  devServer: {
10  host: "localhost",
11  port: 8080,
12  open: true,
13  hotOnly: true, // 热更新
14  // 设置代理
15  proxy: {
16  "/apiTot": {
17  // 本地mock服务器
18  target: "/xxx/",
19  changeOrigin: true,
20  ws: false,
21  },
22  //如果项⽬中存在多个域名接⼝，可依次进⾏配置
23    "/apib":{
24        target: "/xxx/",
25        changeOrigin: true,
26        ws: false,
27    },
28  },
29  },
30 };

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。