vue项目中axios请求网络接口封装

一、安装axios

npm install axios

 

二、封装方法

在src目录下新建utls文件夹,并在该文件夹建如下文件:

1、url.js

统一放置接口

// 获取查车单列表
let mycheckList = ‘VehicleOwner/MyCheckList‘;
module.exports = {
    mycheckList
}

 

2、http.js

引入axios、mint-ui、并封装get请求、post请求方法

import axios from ‘axios‘;
import {MessageBox, Toast, Indicator} from ‘mint-ui‘;
axios.defaults.timeout = 50000//默认请求超时时间
axios.defaults.baseURL = "/api";
axios.defaults.headers.common["Authorization"] = ‘toke信息‘

// get
export function getHttp (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, data)
        .then(response => {
          resolve(response.data)
          Indicator.close() // // 关闭动画
        })
        .catch(err => {
          reject(err)
          Indicator.close() // // 关闭动画
          MessageBox.alert(‘message‘, err)
        })
    })
  }


  // post
  export function postHttp (url, data = {}) {
    Indicator.open({
      text: ‘加载中...‘,
      spinnerType: ‘fading-circle‘
    })
    return new Promise((resolve, reject) => {
      axios.post(url, data)
        .then(response => {
          if (response.status == 200) {
            resolve(response.data)
            Indicator.close();   // 关闭动画
          } else {
            Toast(response.data.msg)
          }
        }, (err) => {
          reject(err)
          Indicator.close() // // 关闭动画
        })
    })
}

 

三、配置main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import {getHttp, postHttp} from ‘./utils/http‘
Vue.prototype.$getHttp = getHttp
Vue.prototype.$postHttp = postHttp

// mint-ui
import Mint from ‘mint-ui‘;
Vue.use(Mint);
import ‘mint-ui/lib/style.css‘; 


Vue.config.productionTip = false;

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

 

四、配置本地请求代理

在根目录下新建vue.config.js,做如下配置

module.exports = {
    publicPath:‘./‘,
    configureWebpack:{
        resolve: {
            alias: {
              ‘assets‘: ‘@/assets‘,
              ‘common‘: ‘@/common‘,
              ‘components‘: ‘@/components‘,
              ‘network‘: ‘@/network‘,
              ‘views‘: ‘@/views‘,
              ‘plugins‘: ‘@/plugins‘,
            }
          }
    },
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: ‘0.0.0.0‘,
        port: 8066,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            ‘/api‘: {
                /* 目标代理服务器地址 */
                target: ‘https://www.baidu.com/‘,   
                /* 允许跨域 */
                changeOrigin: true,
            },
        },
    }
}

 

五、页面使用

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import urls from ‘@/utils/url.js‘

export default {
  name: "Home",
  components: {
    HelloWorld
  },
  created(){
    this.getUserInfo();
  },
  methods: {
    getUserInfo(){
      let data = {
        CurrentPage: 1,
        PageSize: 10,
        SysCode: "U02_ED2D955CF5E14468A7C2C421_01"
      }
      this.$postHttp(urls.mycheckList, data)
      .then((res) => {
        console.log(res);
      }).catch(res => {
        console.log(res);
      })
    }
  }
};
</script>

 

vue项目中axios请求网络接口封装

上一篇:AS安装出现Cannot find AVD system path. Please define ANDROID_SDK_ROOT


下一篇:C# 消息(Application.DoEvents())