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);
  }
}

六、效果