vue 中请求接口的两种方法

朱雀 2022-02-12 10:20 1827阅读 1赞

vue 项目安装axios：

cnpm install axios --save
    
    import axios from 'axios'    哪个文件需要用到就在哪个文件中引入

安装qs：

npm install --save axios vue-axios qs 
    
     import qs from 'qs'  qs 用来解决vue中post请求以 a=a&b=b 的格式

main.js 内容：

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    import ElementUI from 'element-ui'
    
    import axios from 'axios'  （两句很重要）
    import qs from 'qs'     （两句很重要）
    
    import 'element-ui/lib/theme-chalk/index.css'
    import '@/assets/styles/common.scss'
    import moment from 'moment'
    import Highcharts  from 'highcharts'
    import echarts  from 'echarts'
    Vue.use(ElementUI)
    Vue.prototype.Highcharts=Highcharts
    Vue.prototype.echarts=echarts
    
    Vue.prototype.$ajax=axios  （两句很重要）
    Vue.prototype.$qs=qs    （两句很重要）
    
    Vue.use(Highcharts)
    Vue.use(echarts)
    Vue.config.productionTip = false
    
    Vue.prototype.$moment=moment
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

需要的页面请求接口时 get 和post 两种方法：

loadData(){
                //get 请求接口
                var _this=this;
                _this.$ajax.get(`../static/tsconfig.json`)
                  .then(res=> {
                    let data=res.data.data;
                    console.log(data.description)
                  })
                  .catch(error=>{
                    console.log(error)
                  })
              },
              loadPost(){
                //post请求接口
                var _this=this;
                _this.$ajax.post(
                  `../static/tsconfig.json`,
                  _this.$qs.stringify({
                    sname:'hahaha'
                  })
                )
                  .then(res=> {
                    let data=res.data.data;
                    console.log(data.description)
                  })
                  .catch(error=>{
                    console.log(error)
                  })
              },