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

一、安装axios

npm install axios

 

二、封装方法

在src目录下新建utls文件夹，并在该文件夹建如下文件：

1、url.js

统一放置接口

// 获取省市
let area = 'GetRegionList';
module.exports = {
    area
}

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,
            },
        },
    }
}

 

五、页面使用

async getArea(){   // 获取省市数据
  let res = await this.$postHttp(urls.area);
  if(res.Success){
      console.log('我是省市数据', res.Result);
  }else{
    Toast.fail(res.Message);
  }
}

六、效果