首先确保项目里边的已经安装了 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 = axios.create({ //创建axios实例，请求超时时间为30秒 9 timeout: 30000, 10 }); 11
12 //请求和响应拦截可以根据实际项目需求进行编写 13 instance.interceptors.request.use((config) => { // 请求发起前拦截 14 //这里可以对接口请求头进行操作 如：config.headers['X-Token'] = token 15 console.log("请求拦截",config); 16 return config; 17 }, (error) => { 18 // Do something with request error 19 return Promise.reject(error) 20 }) 21
22 instance.interceptors.response.use(response => { // 响应拦截（请求返回后拦截） 23 console.log("响应拦截",response); 24 return response; 25 }, error => { 26 console.log('catch', error) 27 return Promise.reject(error) 28 }) 29
30 // 可以在文件的上方或者全局env 里边创建一个公用的请求域名，然后跟下方的url进行字符串拼接, 31 // 此处使用了vue.config.js里边全局配置的代理配置，直接将域名放到里面，请求就不会有跨域问题 32 const apiAxios = { 33 get(url, data) { //url:请求路径 data,请求参数（） 34 return instance.get(url,{params:data}) 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",如果要使用里面的方法，需要 A.apiAxios.get() 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 apiAxios.get('/apiTot/work/search',params).then(res=>{ 18 if (!res) return
19 console.log(res) //打印出请求回来的信息
20 }) 21 } 22 getList() //直接调用请求方法
23
24 return { 25 getList //vue3的规则，return 出方法名，才可以@click="getList()"
26 } 27 } 28 }) 29 </script>
30
31 <style lang="scss" scoped>
32 </style>
在项目的根目录下的vue.config.js文件内可以设置全局配置
1 // vue.config.js 2 module.exports = { 3 // 输出文件目录 4 outputDir: "dist", 5 // eslint-loader 是否在保存的时候检查 6 lintOnSave: false, 7 // 基本路径 8 publicPath: process.env.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: "https://www.xxxx.com/xxx/", 19 changeOrigin: true, 20 ws: false, 21 }, 22 //如果项目中存在多个域名接口，可依次进行配置 23 "/apib":{ 24 target: "https://www.xxxx.com/xxx/", 25 changeOrigin: true, 26 ws: false, 27 }, 28 }, 29 }, 30 };
参考来源：https://www.jb51.net/article/202891.htm