vue3中使用axios

-2023.05.18更新，修复了之前demo中存在的3个问题。现在可以无bug跑起来。

1.axios在vue3.x中的基础入门使用

在不涉及使用axios进行请求拦截以及响应拦截的场景下，axios的使用可以简化为以下步骤。

• step1. 使用npm安装axios

  npm install axios
  

• step2. 我们将要使用的axios实例单独编写成一个js文件，文件夹可以建立在src/plugins/（自己选择建立在什么地方）。命名为： axiosInstance.js

  //axiosInstance.js
  //导入axios
  import axios from 'axios'
  
  //使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。
  const API = axios.create({
  	baseURL:'http://localhost:8080', //请求后端数据的基本地址，自定义
  	timeout: 2000                   //请求超时设置，单位ms
  })
  
  //导出我们建立的axios实例模块，ES6 export用法
  export default API
  

• step3. 然后在main.js中导入我们编写axiosInstance.js文件，全局配置一下axios的引用。

  //main.js
  import { createApp } from 'vue'
  import App from './App.vue'
  import axios from '@/plugins/axiosInstance.js'
  
  const app = createApp(APP);   //建立一个vue3app
  app.mount('#app');            //将这个vue3app全局挂载到#app元素上
  app.config.globalProperties.$axios=axios;  //配置axios的全局引用
  
  

• step4. 就是在我们需要进行aixos请求的地方进行使用了，为了方便演示，使用mockjs进行模拟后端接口，

  以下是mockjs的基础入门使用

  • 安装mockjs

    npm install mockjs
    

  • 然后在我们的src/ 路径下建立一个用于存放mock模拟数据的文件，就叫index.js吧，此时层级关系为：

    /src/mock/index.js, 在 这个index.js中编写我们关于mock模拟数据的配置以及需要请求的数据，如下：

    // src/mock/index.js
    import Mock from 'mockjs'  //导入mockjs
    
    //使用Mock下面提供的mock方法进行需要模拟数据的封装
    //参数1，是需要拦截的完整请求地址，参数2，是请求方式，参数3，是请求的模拟数据
    const testData = Mock.mock('http://localhost:8080/test','get',{
    	status:200, //请求成功状态码
    	dataList:[1,2,3,4,5,6,7,8,9,10] //模拟的请求数据
    })
    
    //导出
    export default testData
    

  • 在main.js里面全局引用一下我们的编写的相关mockjs

    //导入mock
    import './mock/'
    

  • mockjs简单配置也完成了，下面就在创建的初始 /about 页面简单编写一个请求测试是否成功

    //About.vue
    <template>
      <div class="about">
        <h1>This is an about page</h1>
        <button @click="getData()">test axios 请求数据</button>
        <p>这是请求到的数据{{testData.list}}</p>
      </div>
    </template>
    <script>
    import { reactive } from 'vue'
    import API from "../plugins/axiosInstance"
    export default{
        name:'About',
        setup(){
            //数据
            const testData = reactive({
                list:[]
            });
    
            //测试请求方法
            const getData = function(){
                API({
                    url:'/test',
                    method:'get'
                }).then((res)=>{
                    alert('请求成功!');
                    testData.list = res.data.dataList;
                });
            }
            return{
                testData,
                getData,
            }
        }
    
    }
    </script>
    
    

• 结果