vue系列---【axio安装、2种请求传参、配置代理、拦截器】

1.实现前后端数据交互，先启动后端

2.配置代理

在你的项目目录下创建一个文件，叫 vue.config.js:

module.exports = {
  // 部署应用时的基本 URL
  publicPath:"",
  // build 时构建文件的目录
  outputDir: 'dist',
  // build 时放置生成的静态资源 (js、css、img、fonts) 的目录 assetsDir: 'static',
  // 指定生成的 index.html
  indexPath: 'index.html',
  // 设置代理请求
  devServer: {
    proxy: {
      "/api":{
        	target:"url",
        	ws:true,
        	changeOrigin:true
      }
    } 
  }
}

注意：前端项目重启

3. 安装 引入

npm i axios --save

import axios from "axios"

4. 2种请求

post

axios({
	url:"url",
	method:"post",
	data:{
		//参数
	}
}).then(res=>{
  console.log(res)
})


//axios.post(url,参数,config).then(res=>{})
axios.post("/login",{
  phone:"",
  password:""
},{
  headers:{}
}).then(res=>{})

get

axios({
	url:"url",
	method:"get", //method如果省略，默认是get
	params:{
		//参数
	}
}).then(res=>{
  console.log(res)
})


//axios.get(url,config).then(res=>{})
axios.get("/login",{
  params:{phone:"",password:""},
  headers:{}
}).then(res=>{})

5.post请求传参问题

没文件 ，用qs

安装：

npm i qs --save

引入：

import qs from "qs"

传参：

axios({
        //url 路径 method请求方式 data参数
        url: "/api/register",
        method: "POST",
        data: qs.stringify(user)
    })

有文件，FormData()

//user={name:"",pass:"",ava:File}
    let data=new FormData()
    // data.append("name","1")
    // data.append("pass",1),
    // data.append("ava",file)
    for(let i in data){
        data.append(i,user[i])
    }
    return axios({
        //url 路径 method请求方式 data参数
        url: "/api/register",
        method: "POST",
        data: data
    })

6.拦截器

请求拦截

//请求拦截:每一次发请求给后端，需要统一加的参数在请求拦截中做，比如加token
//请求拦截return的内容就是后端收到的真正的请求信息
axios.interceptors.request.use(config=>{
    localStorage.getItem("userInfo")&&( config.headers.authorization=JSON.parse(localStorage.getItem("userInfo")).token)
    return config
})

响应拦截

//响应拦截:每一次，后端返回的数据，统一操作在响应拦截中处理
//响应拦截return的内容就是组件收到的数据
axios.interceptors.response.use(res=>{
    //统一处理失败
    if(res.data.code!==200){
        alert(res.data.msg)
    }

    //掉线处理
    if(res.data.msg=="登录已过期或访问权限受限"){
        //跳转login
        router.push("/login")
    }

    console.log("本次请求路径是："+res.config.url)
    console.log(res)
    return res;
})

8.import

//一个文件只能有1个export default
// import a from "./a"
export default 10;


//可以有很多个export
// import {login,register} from "./a"
export let login = 20;
export let register = 30;
export let index = 40;

9.环境：

//开发环境 8080
if (process.env.NODE_ENV==="development") {
    Vue.prototype.$pre = "http://localhost:3000"
}

//生产环境：打包后的代码 3000
if (process.env.NODE_ENV==="production") {
    Vue.prototype.$pre = ""
}