vue基礎之axios模塊化+反向代理

 

1>如何將axios代碼從main.js文件中獨立出來(模塊化開發類似node.js)?

　　.創建axios.js文件

　　.在main.js中引入axios.js代碼(其他js代碼的模塊化以此類推)

　　

import Axios from './axios/axios'//引入axios分離文件

 

2>奉上封裝的axios.js模塊代碼

import Vue from "vue";
import axios from 'axios'   
import Qs from 'qs'  
Vue.prototype.$http = axios.create({
  transformRequest: [function (data) {//調用時自動變成表單數據
      data = Qs.stringify(data);
      return data;
  }],
  headers:{'Content-Type':'application/x-www-form-urlencoded'}//默認請求頭為表單數據
})

注:因為后台接收的是表單數據而不是json數據,因此將設置將傳入的數據統一轉化成表單數據;並將axios寫入原型方便調用

 

3>在vue組件中發送請求直接  thsi.$http...

.post請求:

this.$http.post("后台接口地址",data).then((res)=>{//data是傳給后台的對象
   //..
})
.catch((err)=>{
           
})

 

3>補充:vue反向代理實現前端跨域

.在項目根目錄下新建vue.config.js文件寫入以下代碼

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: '后端接口根路徑',//例如http://www.baidu.com
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                '^/api': '/'  //調用時用api替代根路徑
                }
            }
        }
    }
}

 

.調用例子

this.$http.post("api/login",data).then((res)=>{//模擬訪問登錄接口,提交登錄數據
   //..
})
.catch((err)=>{
           
})