vue基础之axios模块化+反向代理

Posted 2022-09-14 jinchange

 

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)=>
           
)