ToB企服应用市场:ToB评测及商务社交产业平台

标题: 在 Vue 3 中使用 Axios 发送 POST 请求 [打印本页]
作者: 莫张周刘王    时间: 2024-7-25 01:02
标题: 在 Vue 3 中使用 Axios 发送 POST 请求
在 Vue 3 中使用 Axios 发送 POST 请求需要起首安装 Axios，然后在 Vue 组件或 Vuex 中使用它。以下是一个简单的安装和使用案例：
安装 Axios

你可以使用 npm 或 yarn 来安装 Axios：
  2.         npm install axios  
  4.         # 或者  
  6.         yarn add axios
复制代码
使用 Axios 发送 POST 请求

起首，在你的 Vue 组件中导入 Axios：
  2.         <template>  
  4.           <div>  
  6.             <button @click="sendPostRequest">发送 POST 请求</button>  
  8.           </div>  
  10.         </template>  
  12.           
  14.         <script>  
  16.         import axios from 'axios';  
  18.           
  20.         export default {  
  22.           methods: {  
  24.             async sendPostRequest() {  
  26.               try {  
  28.                 const response = await axios.post('https://example.com/api/endpoint', {  
  30.                   key1: 'value1',  
  32.                   key2: 'value2'  
  34.                 });  
  36.                 console.log(response.data);  
  38.               } catch (error) {  
  40.                 console.error('Error sending POST request:', error);  
  42.               }  
  44.             }  
  46.           }  
  48.         };  
  50.         </script>
复制代码
在上面的例子中，当点击按钮时，sendPostRequest 方法会被调用，它会向指定的 URL 发送一个 POST 请求，并携带一些数据。如果请求成功，它会打印响应数据；如果请求失败，它会打印错误信息。
如果你更倾向于在 Vuex 中处理 API 请求，你可以这样做：
起首，在你的 Vuex store 中导入 Axios：
  2.         import axios from 'axios';  
  4.           
  6.         export default new Vuex.Store({  
  8.           actions: {  
  10.             async fetchData({ commit }) {  
  12.               try {  
  14.                 const response = await axios.post('https://example.com/api/endpoint', {  
  16.                   key1: 'value1',  
  18.                   key2: 'value2'  
  20.                 });  
  22.                 commit('setData', response.data);  
  24.               } catch (error) {  
  26.                 console.error('Error fetching data:', error);  
  28.               }  
  30.             }  
  32.           },  
  34.           mutations: {  
  36.             setData(state, data) {  
  38.               state.data = data;  
  40.             }  
  42.           },  
  44.           state: {  
  46.             data: null  
  48.           }  
  50.         });
复制代码
然后，在你的 Vue 组件中调用这个 action：
  2.         <template>  
  4.           <div>  
  6.             <button @click="fetchData">获取数据</button>  
  8.           </div>  
  10.         </template>  
  12.           
  14.         <script>  
  16.         export default {  
  18.           methods: {  
  20.             fetchData() {  
  22.               this.$store.dispatch('fetchData');  
  24.             }  
  26.           },  
  28.           computed: {  
  30.             data() {  
  32.               return this.$store.state.data;  
  34.             }  
  36.           }  
  38.         };  
  40.         </script>
复制代码
在这个例子中，当点击按钮时，fetchData 方法会被调用，它会触发 Vuex 中的 fetchData action。这个 action 会发送 POST 请求并更新 Vuex store 中的数据。然后，你可以通过盘算属性来访问这些数据。

创建一个 Axios 实例并配置一些底子选项

  2.         const instance = axios.create({  
  4.           baseURL: 'https://some-domain.com/api/',  
  6.           timeout: 1000,  
  8.           headers: {'X-Custom-Header': 'foobar'}  
  10.         });  
  12.           
  13.         const onSubmit = async () => {  
  15.           try {  
  17.             const response = await instance.post('/customer_info', {  
  19.               inputValue // 注意判断inputValue是否已经是对象，如果是删除{}
  21.             });  
  23.             console.log(response.data);  
  25.           } catch (error) {  
  27.             if (error.response) {  
  29.               // 请求已发出，服务器也返回了状态码，但状态码不在 2xx 范围内  
  31.               console.error('Error sending POST request:', error.response.data);  
  33.               // 可以根据 error.response.data 中的错误信息向用户展示具体的提示  
  35.             } else if (error.request) {  
  37.               // 请求已发出，但没有收到任何回应  
  39.               console.error('The request was made but no response was received:', error.request);  
  41.             } else {  
  43.               // 在设置请求时触发了一个错误  
  45.               console.error('Error setting up the request:', error.message);  
  47.             }  
  49.           }  
  51.         };
复制代码
请注意以下几点：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4