关于调用聚合接口天气篇总结

最新推荐文章于 2024-04-15 11:29:23 发布

ChengCe

最新推荐文章于 2024-04-15 11:29:23 发布

阅读量571

点赞数 1

本文链接：https://blog.csdn.net/woshichengce/article/details/100057893

版权

解决问题：跨域问题
Get参数是放在路由后边的，Post是放在请求体里边的

1.直接axios调用

①在main.js公共文件中引入

 import axios from 'axios'
 Vue.prototype.axios = axios;
 import Qs from 'qs'
 Vue.prototype.qs = Qs;

②config（dev下的proxyTable）文件增加相关配置，用方代理解决跨域问题

'/api': {
            target: 'http://v.juhe.cn',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,
            pathRewrite: {
              '^/api': '' //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'https://api.douban.com/user/add'，直接写‘/api/user/add’即可，此处的‘api’可以设置为自己想要设置的任何词语，符合规范即可
            }
       }

③需要调取天气接口页面（例如：hone.vue）

methods:{
    getWeather(){
    //将域名用/api代替
    this.axios.get('/api/weather/index?cityname=石家庄&dtype=&format=&key=c1440222ba3eede2127ef6364c47e6f0',{
    }).then(res=>{
      console.log(res)
      })
 },
  mounted() {
      this.getWeather()
  }

2.用封装后的axios调用

①同上config中增加配置
②api/user/user.js文件

export const weather = function(params) {
    return fetchGet('/api/weather/index?cityname=石家庄&key=c1440222ba3eede2127ef6364c47e6f0', params)
}

③需要调取天气接口页面（例如：hone.vue）

<script>
// 导入
  import {weather} from '@/api/user/user'
export default {
  data () {
    return {
    }
  },
  methods:{
      getWeather(){
        weather({}).then(res =>{
            this.test_data = res.result.today
            console.log(res)
        })
      }
  },
  mounted() {
      this.getWeather()
  }
}
</script>