vue 数据请求

1、配置代理

config/index.js中

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

注意：配置完代理后要重启项目

2、axios 阿可信 阿可西奥斯河

1、安装

npm i axios --save

2、引入

import axios from "axios"

3、使用

// post请求
axios({
    url:"",
    method:"post",
    data:{}
}).then(res=>{
​
})
// get请求
axios({
    url:"",
    method:"get",
    params:{}
}).then(res=>{
​
})

3、axios封装

1、在util/request.js中

import axios from "axios"
​
// 登录接口
export const movie= () => {
  return axios({
    url: "/api/movieList",
    method: "get"
  })
}

2、在对应组件页面使用

import {movie} from "../util/request"
​
mounted() {
  movie().then(res=>{
    console.log(res);
    this.movies = res.data.data
  })
}

4、拦截器

// 请求拦截：组件发起请求,配置项先到了请求拦截,请求拦截可以修改请求配置,然后retur n的结果发送给后端
axios.interceptors.request.use( config =>{
  console.log("========此处是请求拦截器=========");
  console.log(config);
  console.log("==========拦截器结束============");
​
  // 获取身份信息
  var status = sessionStorage.getItem("status")
  if(status){
    config.status = status
  }
  return config
})
​
​
// 响应拦截：后端相应数据，先到响应拦截器，拦截器可以处理数据，return的数据就是给组件的数据
axios.interceptors.response.use((res)=>{
  console.log("========此处是响应拦截器=========");
  console.log(res);
  console.log("==========拦截器结束============");
  if(!res.data.isok){
    alert("请检查账号或密码")
  }
  return res
})

5、post请求BUG

post请求：如果后端接收不到你的数据，如果参数中接收不到文件。可以借助qs解决 1、安装

npm i qs --save

2、引入

import qs from "qs"

3、使用 3.1、针对于后端收不到数据

  return axios({
    url: "/api/login",
    method: "post",
    data: qs.stringify(user)
  })

3.2、针对于后端收不到文件

  var form = new FormData()
  for (let i in user) {
    form.append(i, user[i])
  }
  return axios({
    url: "/api/login",
    method: "post",
    data: form
  })