Vue学习笔记56--vue常用Ajax库(axios)

vue常用Ajax库 ：

1.vue-resource插件库

npm i vue-resource

使用方式略，不建议使用，vue1.x使用广泛，官方已不维护

2.axios

通用的Ajax请求库，官方推荐，使用广泛

axios在Vue项目中可以用来向后台发送请求（调接口API），获取响应信息的一个方法。

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中, 也是 vue 官方推荐使用的 http 库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理。

使用操作步骤：

第一步：安装--npm install axios --save

第二步：引入--import axios from "axios"; 

第三步：配置--vue.config.js

devServer: {
    // 开启代理服务器
    proxy: {
      '/swg-api': {
        target: 'http://172.18.112.222:8866',
        pathRewrite: {
          '^/swg-api': '' // 重置地址
        },
        // rewrite: (path) => path.replace(/^\/swg-api/, ""),
        changeOrigin: true, // //开启代理 默认ture
        ws: false, //如果要代理 websockets，配置这个参数
        secure: true,// https记得把secure设置为true
      },
      '/swg-api-test': {
        target: 'http://172.18.112.222:8866',  //ic-api-test 这个用来和根路径 baseURL 进行匹配
        pathRewrite: {
          '^/swg-api-test': ''
        },
        changeOrigin: true,//开启代理
        ws: false, //如果要代理 websockets，配置这个参数
        secure: true // https记得把secure设置为true
      },
    }
  },

第四步：使用（见示例Test.vue）

示例一：

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false

// console.log('Vue.prototype==>', Vue.prototype)
// console.log('VueComponent.prototype.__proto__==>', Vue.prototype)

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div class="app">
    <Test></Test>
  </div>
</template>

<script>
// 引入组件
import Test from './components/Test.vue';
export default {
  name: 'App',
  components: { Test },
  data () {
    return {
      // msg: '消息订阅与发布'
    }
  },

}
</script>

<style scoped>
.app {
  background-color: rgb(178, 168, 168);
  padding: 15px;
}
</style>

Test.vue

<template>
  <div>
    <button @click="getDictAllOrganization">{{msg}}</button>
    <hr>
    <h2>医院信息如下所示:</h2>
    {{info}}

  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'Test',
  data () {
    return {
      msg: '获取医院信息',
      info: '',
      // path: 'http://172.18.112.222:8866/api/DictOrganization/GetDictAllOrganization'   可正常访问
      // path: 'http://172.18.112.222:8866/swg-api/api/DictOrganization/GetDictAllOrganization'  不可访问
      path: 'swg-api/api/DictOrganization/GetDictAllOrganization'   //可访问，可触发代理
    }
  },
  methods: {
    getDictAllOrganization () {
      console.log('path==>' + this.path)
      axios.get(this.path)
        .then(response => (this.info = response))
        .catch(function (error) {
          // 请求失败处理
          console.log('获取医院信息出错了==》' + error);
        });
    }
  }
}
</script>

<style scoped>
h2 {
  background-color: bisque;
}
</style>

Vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭语法检查
  lintOnSave: false,
  devServer: {
    // 开启代理服务器
    proxy: {
      '/swg-api': {
        target: 'http://172.18.112.222:8866',
        pathRewrite: {
          '^/swg-api': '' // 重置地址
        },
        // rewrite: (path) => path.replace(/^\/swg-api/, ""),
        changeOrigin: true, // //开启代理 默认ture
        ws: false, //如果要代理 websockets，配置这个参数
        secure: true,// https记得把secure设置为true
      },
      '/swg-api-test': {
        target: 'http://172.18.112.222:8866',  //ic-api-test 这个用来和根路径 baseURL 进行匹配
        pathRewrite: {
          '^/swg-api-test': ''
        },
        changeOrigin: true,//开启代理
        ws: false, //如果要代理 websockets，配置这个参数
        secure: true // https记得把secure设置为true
      },
    }
  },
})