Vue中使用axios(Promise)

原创

已于 2022-03-14 11:07:02 修改 · 置顶 · 6.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #ajax #javascript #js #前端

于 2020-11-15 15:04:07 首次发布

本文介绍了axios的基本使用和Promise的工作原理，通过实例展示了如何在Vue中使用axios进行数据请求。同时，文章还探讨了如何基于Promise手动封装一个简单的ajax函数，并提供了具体的代码实现。此外，文章鼓励读者加入技术交流群，共享学习资源。

前端小白简单总结，参考黑马珠峰等课程以及其他内容整合，还望各位大佬多多指教~

一、axios的使用

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
简单来说就是将ajax基于Promise进行了一个封装

vue中基本的使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/vue.js"></script>

<script>
  let vm = new Vue({
    
    
    el: '#app',
    created(){
    
     // 在数据被初始化后会调用，this指向的也是vm实例，钩子函数
      this.getData();
    },
    data: {
    
    
      products: []
    },
    methods: {
    
    
      getData(){
    
     // 初始化方法
        // 专门用来发送ajax的方法
        // 回调函数中的this指向的是window，因此要用箭头函数
        // Promise 解决回调问题的
        axios.get

最低0.47元/天解锁文章