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

标题: Vue3 Ajax(axios) [打印本页]
作者: 三尺非寒    时间: 2024-10-31 08:13
标题: Vue3 Ajax(axios)
Vue 版本推荐利用 axios 来完成 ajax 请求。
安装方法

利用 cdn:

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
复制代码
利用 npm:

  1. $ npm install axios
复制代码
 GET 方法

我们可以简单的读取 JSON 数据：
  1. const app = {
  2.   data() {
  3.     return {
  4.       info: 'Ajax 测试!!'
  5.     }
  6.   },
  7.   mounted () {
  8.     axios
  9.       .get('https://www.runoob.com/try/ajax/json_demo.json')
  10.       .then(response => (this.info = response))
  11.       .catch(function (error) { // 请求失败处理
  12.         console.log(error);
  13.     });
  14.   }
  15. }
  17. Vue.createApp(app).mount('#app')
复制代码
 利用 response.data 读取 JSON 数据：
  1. <div id="app">
  2.   <h1>网站列表</h1>
  3.   <div
  4.     v-for="site in info"
  5.   >
  6.     {{ site.name }}
  7.   </div>
  8. </div>
  9. <script type = "text/javascript">
  10. const app = {
  11.   data() {
  12.     return {
  13.       info: 'Ajax 测试!!'
  14.     }
  15.   },
  16.   mounted () {
  17.     axios
  18.       .get('https://www.runoob.com/try/ajax/json_demo.json')
  19.       .then(response => (this.info = response.data.sites))
  20.       .catch(function (error) { // 请求失败处理
  21.         console.log(error);
  22.     });
  23.   }
  24. }
  26. Vue.createApp(app).mount('#app')
  27. </script>
复制代码
GET 方法传递参数格式如下：
  1. // 直接在 URL 上添加参数 ID=12345
  2. axios.get('/user?ID=12345')
  3.   .then(function (response) {
  4.     console.log(response);
  5.   })
  6.   .catch(function (error) {
  7.     console.log(error);
  8.   });
  10. // 也可以通过 params 设置参数：
  11. axios.get('/user', {
  12.     params: {
  13.       ID: 12345
  14.     }
  15.   })
  16.   .then(function (response) {
  17.     console.log(response);
  18.   })
  19.   .catch(function (error) {
  20.     console.log(error);
  21.   });
复制代码
POST 方法

  1. const app = {
  2.   data() {
  3.     return {
  4.       info: null
  5.     }
  6.   },
  7.   mounted () {
  8.     axios
  9.       .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
  10.       .then(response => (this.info = response))
  11.       .catch(function (error) { // 请求失败处理
  12.         console.log(error);
  13.       });
  14.   }
  15. }
  17. Vue.createApp(app).mount('#app')
复制代码
POST 方法传递参数格式如下：
  1. axios.post('/user', {
  2.     firstName: 'Fred',        // 参数 firstName
  3.     lastName: 'Flintstone'    // 参数 lastName
  4.   })
  5.   .then(function (response) {
  6.     console.log(response);
  7.   })
  8.   .catch(function (error) {
  9.     console.log(error);
  10.   });
复制代码
执行多个并发请求

  1. function getUserAccount() {
  2.   return axios.get('/user/12345');
  3. }
  5. function getUserPermissions() {
  6.   return axios.get('/user/12345/permissions');
  7. }
  8. axios.all([getUserAccount(), getUserPermissions()])
  9.   .then(axios.spread(function (acct, perms) {
  10.     // 两个请求现在都执行完成
  11.   }));
复制代码
axios API

可以通过向 axios 传递相关配置来创建请求。
  1. axios(config)
  2. // 发送 POST 请求
  3. axios({
  4.   method: 'post',
  5.   url: '/user/12345',
  6.   data: {
  7.     firstName: 'Fred',
  8.     lastName: 'Flintstone'
  9.   }
  10. });
  11. //  GET 请求远程图片
  12. axios({
  13.   method:'get',
  14.   url:'http://bit.ly/2mTM3nY',
  15.   responseType:'stream'
  16. })
  17.   .then(function(response) {
  18.   response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  19. });
  20. axios(url[, config])
  21. // 发送 GET 请求（默认的方法）
  22. axios('/user/12345');
复制代码
请求方法的别名

为方便利用，官方为所有支持的请求方法提供了别名，可以直接利用别名来发起请求：
  1. axios.request(config)
  2. axios.get(url[, config])
  3. axios.delete(url[, config])
  4. axios.head(url[, config])
  5. axios.post(url[, data[, config]])
  6. axios.put(url[, data[, config]])
  7. axios.patch(url[, data[, config]])
复制代码


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



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