http客户端axios

1. #user  nobody;
2. worker_processes  1;
3. 
4. #error_log  logs/error.log;
5. #error_log  logs/error.log  notice;
6. #error_log  logs/error.log  info;
7. 
8. #pid        logs/nginx.pid;
9. daemon off;
10. events {
11.     worker_connections  65535;
12.   multi_accept on;
13. }
14. 
15. http {
16.     include       mime.types;
17.     default_type  application/octet-stream;
18. 
19. #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
20. #                  '$status $body_bytes_sent "$http_referer" '
21. #                  '"$http_user_agent" "$http_x_forwarded_for"';
22. 
23. #access_log  logs/access.log  main;
24. 
25.     sendfile        on;
26.     tcp_nopush     on;
27.   tcp_nodelay     on;
28. 
29. #keepalive_timeout  0;
30.     keepalive_timeout  65;
31. 
32.     server {
33.            listen 8080;
34.        server_name localhost;
35.        ##  = /表示精确匹配路径为/的url，真实访问为http://localhost:8088
36.        location = / {
37.          proxy_pass http://localhost:8088;
38.        }
39.        ##  /no 表示以/no开头的url，包括/no1,no/son，或者no/son/grandson
40.        ##  真实访问为http://localhost:5500/no开头的url
41.        ##  若 proxy_pass最后为/ 如http://localhost:3000/;匹配/no/son，则真实匹配为http://localhost:3000/son
42.        location /no {
43.          proxy_pass http://localhost:8088;
44.        }
45.        ##  /ok/表示精确匹配以ok开头的url，/ok2是匹配不到的，/ok/son则可以
46.        location /Demo/testDemoTranNew {
47.          proxy_pass http://localhost:8088;
48.    }           
49.     }
50. }
51. 复制代码

        //增加跨域
        proxyTable: {
            "/api": {
                //目标地址
                target: "http://localhost:8088",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
复制代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
Vue.config.productionTip = false
Vue.prototype.$axios = axios
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
复制代码

<template>
<div>
      {{data}}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
  return {
    content:"组件1",
    data:{}
    }
},
methods:{
},
created() {
  //第一种
  // this.$axios.get("https://api.apiopen.top/searchMusic",{
  //   params:{
  //      name:"雅俗共赏"
  //   }
  // }
  // )
  // .then(res => {
  //     console.log(res)
  //     this.data = res.data
  // })
  // .catch(error => {
  //     console.log(error)
  // })
  // 第二种
  this.$axios({
    method: 'get',
    url: 'https://api.apiopen.top/searchMusic',
    params: {
        name:"雅俗共赏"
    }
  })
  .then(res => {
      console.log(res)
      this.data = res.data
  })
  .catch(error => {
      console.log(error)
  })
  ;
}
}
</script>
复制代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
复制代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
import qs from 'qs'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'https://api.it120.cc';
//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    console.log(config)
    if (config.method === "post") {
        config.data = qs.stringify(config.data);
    }
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    console.log(response)
    if (response.status !== 200) {
        return;
    }
    // 对响应数据做点什么
    return response;
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
复制代码

<template>
<div>
      {{data}}
</div>
</template>
<script>
import qs from "qs"
export default {
name: 'HelloWorld',
data () {
  return {
    content:"组件1",
    data:{}
    }
},
methods:{
},
created() {
  // 发送 POST 请求
  this.$axios({
    method: 'post',
    url: '/common/mobile-segment/next',
    data: {
         segment: 0
    }
  })
  .then(res => {
      console.log(res)
      this.data = res.data
  })
  .catch(error => {
      console.log(error)
  });
}
}
</script>
复制代码