封装vue的axios网络请求，使用起来很简便的奥

r囧r小猫 2024-04-19 00:55 16阅读 0赞

### （以下代码可以直接运行奥，跟着步骤即可） ###

### （1）Home.vue     ###

<template>
      <div id="home">
        首页
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            msg: ''
          }
        },
        methods: {
          getMusicListData() {    // 未封装的axios请求
            let that = this;
            let url = that.httpUrl.url + '/justdoit/getMusicList';
            that.$axios.get(url).then(res => {
              console.log('getMusicListData1请求拿到的数据===',res);
            }).catch(error => {
              console.log(error);
            })
          },
          getMusicListData2() {   // 使用封装后的axios请求
            let that = this;
            let url = '/justdoit/getMusicList'
            that.httpRequest(url, '', 'get').then(res => {
              console.log('getMusicListData2请求拿到的数据===',res);
            })
          }
        },
        mounted() {
          this.getMusicListData();
          this.getMusicListData2();
        }
    
      }
    </script>
    
    <style scoped="scoped">
    </style>

### （2）在static下新建common.js文件：  封装的网络请求 ###

// 存放公共js的文件
    export default{
      install(_this,options){
        /*
        * 统一管理域名
        */
        _this.prototype.httpUrl = {
          url:'https://easy-mock.com/mock/5d7cf23cfe3cb42ae532ac1b',  // 域名
        }
        /*
        * 封装的数据请求
        * url:  传入的api接口
        * params： 传入的参数
        * type：  请求类型（默认是post）
        */
        _this.prototype.httpRequest = (url,params,type='post')=>{
          return new Promise((resolve,reject)=>{
            _this.prototype.$axios({
              url:_this.prototype.httpUrl.url + url,
              method:type,
              headers: { 'content-type': 'application/x-www-form-urlencoded' },
              data:_this.prototype.$qs.stringify(params)
            }).then(res=>{
               return resolve(res);
            }).catch(error=>{
              return reject(error);
            })
          })
        }
      }
    }

### （3）提前安装axios。[安装参考][Link 1] ###

### 在main.js里面： ###

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import axios from 'axios'
    import qs from 'qs'
    import Common from '../static/common.js'       // 引入公共的commonjs
    
    Vue.prototype.$axios = axios;
    Vue.prototype.$qs= qs;
    
    Vue.use(Common)     // 光引入是不可以的奥，得use。
    
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

### 栗子： ###

运行上面Home.vue文件，得到如下：

![2019091423264321.png][]

两个的请求结果是一样的。

[Link 1]: https://www.npmjs.com/package/axios
[2019091423264321.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/64696df0e0e94c5d9b04a6ee7f6053d9.png