基于Webpack打包axios在Vue和React中的使用

数据请求-axios

1.安装

npm install axios --save

2.配置代理

React中：
在package.json

{
	 "proxy":"http://localhost:3000",
}

Vue中：
在config/index.js

		proxyTable: {
      "/api":{
        target:"http://localhost:3000",
        changeOrigin:true,
        pathRewrite:{
          "^/api":"http://localhost:3000"
        }
      }
    },

配置完成以后 一定要重启前端项目。

3.使用

1.get

import axios from "axios"
axios({
  url:"url",
  method:"get",
  params:{
    
  }
}).then(res=>{
  console.log(res)
})

2.post

import axios from "axios"
axios({
  url:"url",
  method:"post",
  data:{
    
  }
}).then(res=>{
  console.log(res)
})

如果post请求传参数，前端传了，后端没收到，使用 qs 解决。

npm install qs --save

import axios from "axios"
import qs from "qs"
axios({
  url:"url",
  method:"post",
  data:qs.stringify({
    
  })
}).then(res=>{
  console.log(res)
})

4.拦截

请求拦截

axios.interceptors.request.use((config)=>{
  
  	return config;
})

响应拦截

axios.interceptors.response.use(res=>{
  //统一操作服务端返回的数据
  return res;
})