Vue通讯

`axios`

引入：
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
引入后暴漏出一个axios对象，调用后返回promise对象
或者通过npm i axios 安装

`get`


axios({
  url:'',
  method:'get', // 默认get方式 可以不写这一项
  // post方式用data get方式用params
  params:{
    key : vaule
  }
})
.then(res=>{console.log(res)})
.catch(err=>{throw err})

如果没有参数的get方式
axios(url).then()

`post`

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
let params = new URLSearchParams();
params.append('a': 1);
params.append('b': 2);
axios({
  url: '',
  method: 'post',
  // post传参为data
  data: params
})
  .then(res => { console.log(res) })
  .catch(err => { throw err })

`post`坑：跨域报错

在new Vue上边统一设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

使用URLSearchParams实例化params对象
let params = new URLSearchParams()

使用params .append()方法添加参数
params.append(key,value);
params.append(key2,value2)

完整代码

<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script>
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  let params = new URLSearchParams();
  params.append('a', 1);
  params.append('b', 2);
  new Vue({
    el: '#app',
    methods: {
      get() {
        axios({
          url: '',
          method: 'get', // 默认get可以不写
          // get方式用params
          params: {
            key: vaule
          }
        })
          .then(res => { console.log(res) })
          .catch(err => { throw err })
      },
      post() {
        axios({
          url: '',
          method: 'post',
          // post传参为data
          data: params
        })
          .then(res => { console.log(res) })
          .catch(err => { throw err })
      }
    }
  })
</script>

跨域问题

前端：反向代理，JSONP
后端：设置请求头header('Access-Control-Allow-Origin:*')

https://blog.csdn.net/yuanlaijike/article/details/80522621
axios的跨域问题

反向代理

项目根目录新建vue.config.js配置如下
vue.config.js默认可以直接使用http-proxy-middleware中间件

module.exports = {
  devServer: {
    proxy: {
      '/duitang': {
        target: 'https://www.duitang.com',
        changeOrigin: true,
        pathRewrite: {
          '/duitang': ''
        }
      }
    }
  }
}

main.js配置如下

import Vue from 'vue'
import App from './App.vue'
import router from './router'
引入axios对象
import axios from 'axios'
将axios设置为全局
Vue.prototype.$http = axios 
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

.vue文件配置如下

export default {
  name: "app",
  components: {},
  created(){
    this.$http.get("/duitang/napi/index/groups/?app_version=14&app_code=mdt")
    .then(res => {console.log(res)})
    .catch(err => {console.log(err)})
  }
};

至此，反向代理成功，可以拿到数据

`fetch`

`vue-resource`

解决post报跨域错误：设置提交方式为普通表单数据

this.$http.post(url,{},{
  emulateJSON:true
})

axios

get

post

post坑：跨域报错