首先確保項目里邊的已經安裝了 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