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企服之家，中国第一个企服评测及商务社交产业平台。