axios -＞ 请求方式 及 反向代理

<template>
    <div id="home">
      <nav-bar class="home-nav"><div slot="center">小蘑菇</div></nav-bar>
    </div>
</template>

<script>
// import axios from 'axios'
import NavBar from 'components/common/navbar/NavBar'
import { getHomeDate1, getHomeDate2 } from 'network/home'
export default {
  name: 'Home',
  data () {
    return {
      msg: String
    }
  },
  components: {
    NavBar
  },
  created () {
    getHomeDate1().then(res => {
      console.log(res.data)
    })
    getHomeDate2().then(res => {
      console.log(res.data)
    })

方式一:
	axios.get('https://m.jiuxian.com/m_v1/promote/qgajax.do?t=1614091975366&pagenum=1&tabnum=1').then(res => {
    	console.log(res.data)
    })
方式二，需要设置请求头的时候使用
    axios({
    	method: '' //请求方式，默认get
    	url: 'https://m.jiuxian.com/m_v1/statics/getzx.htm?topicId=1165&pageNum=1',
        headers: {//有些网站会在请求里添加一些初级的验证信息，在request.headers里会写入一些键值对如何判断 
        //看着不像正常请求头的状态信息如下：遇到这样的 慢慢尝试吧，一般都在靠后 前几个肯定不是
     		'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1614085036108310485270529","bc":"210300"}',
     		'X-Host': 'mall.film-ticket.film.list'
       }
    }).then(res => {
    	   console.log(res.data)
    })
方式三，把真正发送请求的动作写到对应的文件中如：在src下新建network文件夹，此文件夹内再新建home文件夹，
    里面专门放home页需要请求的数据，还可以新建一个公共的请求配置文件夹，里面放请求工具的初始化配置这样
    防止使用的请求工具后期万一不再更新 就可以直接到这个初始化的配置文件里去更改新的请求配置，更加简化了
    .vue文件里的代码块，数据多了难免会出现耦合问题，这样给他加了一个中间模块统一处理后对应的.vue只需面向我
    这个模块发开就会贼清晰
    getHomeDate1().then(res => {
       console.log(res.data)
    })
    getHomeDate2().then(res => {
      console.log(res.data)
    })
  }
  //这里的俩个方法可以.then是因为在上面按需引入对应请求文件路径。文件路径里导出了请求好的状态 
}
</script>

**配置的专门的请求文件如下：**
1.第一步
<script>//公共的请求配置
import axios from 'axios'
export function request (config) {
  // 1.创建axios实例
  const instance = axios.create({
    baseURL: 'https://m.jiuxian.com/m_v1',//发送请求时的配置路径 会拼接在自定义的url前 再真实发送
    timeout: 10000//请求的时间限制，当然还有其他的config，，，
  })
  // 2.axios拦截器
  // 2.1拦截器的作用
  // instance.interceptors.request.use(config => {
  //   return config
  // }, err => {
  //   console.log(err)
  // })

  // 2.2响应拦截
  // instance.interceptors.response.use(res => {
  //   return res.data
  // }, err => {
  //   console.log(err)
  // })

  // 3.发送真正的请求
  return instance(config)//这里的return是简写板，根据retutn new promise((resolve, reject) => {})而来
}
</script>
2.第二步
<script>
import { request } from './request'//引入公共的请求配置文件
export function getHomeDate1 () {//不写成export default 是想实现按需引入效果
  return request({//公共文件中导出的就是一个promise，而这里则是再次返回导出promise，也就是为什么.vue中可以直接.then()
    url: '/statics/getzx.htm?topicId=1165&pageNum=1'
  })
}
export function getHomeDate2 () {
  return request({
    url: '/promote/qgajax.do?t=1614091975366&pagenum=1&tabnum=1'
  })
}
</script>
<style lang="scss" scoped>
.home-nav{
  background-color: rgba(167, 76, 252, 0.6);
}
</style>

反向代理的配置

const path = require('path')// 引入path模块
function resolve (dir) {
  return path.join(__dirname, dir)// path.join(__dirname)设置绝对路径
}
module.exports = {
  devServer: {//配置反向代理
    proxy: {
      '/ajax': {//配置为只要请求的地址中有/ajax你的浏览器就明白了你的意思，它会帮你请求到https://m.maijiuwang.com 如：
      			// /ajax/homexxxx?asd=asd&asfasdasd=asdasdasd=asdasdasdas
      			// /ajax/.....后面是你要请求的地址
      			// 注意这里已经配置里请求地址的前部分 https://m.maijiuwang.com 想要请求其下的数据直接在发送请求的时候
      				//url: '这里写入/ajax/...'就可以了
        target: 'https://m.maijiuwang.com',//要请求的地址
        changeOrigin: true//是否跨域
      }
    }
  },
  lintOnSave: false,
  chainWebpack: (config) => {//配置路径别名
    config.resolve.alias
    // set第一个参数：设置的别名，第二个参数：设置的路径
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('assets', resolve('./src/assets'))
      .set('views', resolve('./src/views'))
      .set('network', resolve('./src/network'))
    // 注意 store 和 router 没必要配置
  }
}